스크롤바 스타일 수정시 ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb 가 적용되지 않는다면 우선 봐야할 부분.
웹킷 기반 브라우저에서 스크롤바 스타일을 지정할 때 ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb 같은 가상 요소를 지정해도 스타일이 적용되지 않는 경우가 있습니다. 이때 우선적으로 봐야 할 부분은 ::-webkit-scrollbar로 width 값을 설정했는지 확인하는 것입니다. ::-webkit-scrollbar로 width 값을 설정하지 않았다면, 기본 스크롤바가 표시됩니다. 참고로 width 값을 설정하지 않은 것과 0인 경우는 다릅니다. width: 0으로 설정한 경우에는 어떤 스크롤바도 표시되지 않습니다. display: none의 경우에도 마찬가지입니다. 결론적으로 웹킷 기반 브라우저에서 스크롤바 스타일을 지정할 때는 스크롤바의 폭을 명시적으로 선언해야 합니다. 참고로 스크롤 트랙에 패딩을 주고 싶은 경우에는 padding 설정이 되지 않으니, 스크롤 버튼에 같은 색으로 테두리를 주면 됩니다. ::-webkit-scrollbar { width: 15px; } ::-webkit-scrollbar-track { background: blue; } ::-webkit-scrollbar-thumb { background: red; border: 3px solid blue; }
