webkit 계열
Chrome, Microsoft Edge, Opera, Safari 브라우저에 적용 가능
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// scrollbar
::-webkit-scrollbar {
width: 8px;
&-track {
background-color: #424242;
}
&-thumb {
border-radius: 4px;
background-color: #686868;
&:hover {
background-color: #7b7b7b;
}
}
}
FireFox
FireFox에만 적용되기 위하여 @-moz-document url-prefix() {} 사용
1
2
3
4
5
6
@-moz-document url-prefix() {
html {
scrollbar-width: thin;
scrollbar-color: #686868 #424242;
}
}
scrollbar-width
width 사이즈를 옵션에서 선택, px 설정은 불가능
- none : 기본값, 보통 크기로 설정 (width: 17px)
- thin : 얇은 크기로 설정 (width: 8px)
- auto : 스크롤바를 숨김, 단 동작은 한다.
scrollbar-color
스크롤바의 색이 첫번째, 배경색이 두번째에 위치에 적용