Scrollbar custom css

프로젝트를 하다보면 처음 일을 하지 않을 때는 생각하지 못했던 디테일도 챙겨야 하는 일이 많이 생긴다.

나에게는 스크롤바가 위와 같은 케이스였다. 

글들을 찾다 보면 ::webkit-scrollbar ~ thumb, track은 많이 보여서 쉽게 적용할 수 있었는데,

내 서치 능력이 부족한거 였겠지만 아무리 track으로 스크롤바 배경색을 바꿔도 저기 빨간 동그라미 영역이 바뀌지 않아서 헤맨적이 있었다.

각 css를 간단하게 설명하고 넘어가자면

기본형인 ::-webkit-scrollbar는 스크롤바의 영역 사이즈를 지정할 때 자주 사용하고,

::-webkit-scrollbar-track은 스크롤 영역 배경색을 지정할 때,

::-webkit-scrollbar-thumb는 스크롤바의 특성을 지정할 때 사용한다.

::-webkit-scrollbar-corner는 track영역이 아니라 지정되지 않았던 y스크롤과 x스크롤이 교차하며 생기는 빈 영역의 css를 지정할 수 있다.