스크롤바는 webkit 브라우저(크롬, 사파리, 오페라 등등)에 한해서 가상요소를 사용해 스타일을 적용할 수 있다!
but! MDN에서는 비표준이므로 실제 프로덕션에서 사용하지 말라는 경고문이 있다!
참고: MDN::-webkit-scrollbar
::-webkit-scrollbar : 스크롤바 전체
::-webkit-scrollbar-thumb : 스크롤 막대
::-webkit-scrollbar-track : 스크롤 막대 외부
::-webkit-scrollbar-track-piece : thumb에 의해 덮이지 않은 트랙의 부분
::-webkit-scrollbar-button : 스크롤바의 버튼 (위 아래로 한 줄씩 오르내리는 화살표)
::-webkit-scrollbar-corner : 수평 스크롤바와 수직 스크롤바가 교차하는 곳의 하단 모서리. 주로 브라우저 창의 우측 하단 모서리에 위치함
::-webkit-resizer : 하단 모서리에 나타나는, 드래그 할 수 있는 사이즈 변경 손잡이
overflow-y로 세로 스크롤이 나타나게끔 설정해주고,
-webkit-scrollbar와 -webkit-scrollbar-thumb 속성의 색상을 바꿔주었다!
여기서 -webkit-scrollbar-track의 색상까지 바꿔주면
이렇게 적용된다!
이렇게 scrollbar에는 width를 통해 원하는 너비를 설정해주고, thumb와 track으로 색상을 지정해주면 원하는 스크롤바를 커스터마이징 할 수 있다.
thumb와 track사이에 간격을 주고 싶을 때에는 thumb의 background-clip을 padding-box로 설정하고 border를 transparent(투명)로 조절하면 된다.
(padding과 margin은 적용 불가)
참고 : 정재우님의 블로그
