[CSS] 스크롤바 커스텀하기

1. webkit 브라우저 스크롤바 속성

::-webkit-scrollbar : 스크롤바 전체
::-webkit-scrollbar-thumb : 스크롤바 핸들 막대
::-webkit-scrollbar-track : 스크롤바 트랙

🎨 예시)

#wrapper::-webkit-scrollbar { 
	width: 4px;
}
#wrapper::-webkit-scrollbar-thumb { 
	background-color: #C6C6C6;
    border-radius: 3px;
}

2. Firefox 브라우저 스크롤바 속성

scrollbar-width : 스크롤바 크기 조절(auto, none, thin)
scrollbar-color : 스크롤바의 Thumb와 Track에 대한 스타일 지정

🎨 예시)

#wrapper { 
	scrollbar-width: thin;
    scrollbar-color: #C6C6C6 #DDDDDD;
}

🍯 추가 Tip

스크롤바 상단에 여백 주기

::-webkit-scrollbar-button:start:decrement, 
::-webkit-scrollbar-button:end:increment {
    display:block;
    height:8px;
    background-color: #000;
}

해당 선택자들을 스타일링하여 사용하는 경우는 드물다. 하지만 아래와 같이 스크롤바 상단에 여백이 필요한 경우 해당 속성을 활용할 수 있다.

🎨예시)

#wrapper::-webkit-scrollbar-button:vertical:start:decrement,
#wrapper::-webkit-scrollbar-button:vertical:start:increment { 
	display: block;
    height: 12px;
}

📌출처
https://inpa.tistory.com/entry/CSS-🌟-스크롤-바Scrollbar-꾸미기-속성-총정리 [Inpa Dev 👨‍💻:티스토리]