스크롤바 색과 두께를 바꾸는 선언을 표준과 비표준 두 블록으로 나눠 만들어 줍니다. 적용 범위, 썸과 트랙 색, 두께, 모서리 반경을 고르면 그대로 붙여 쓸 수 있고, 바로 위 미리보기 상자에서 실제 스크롤바 모양을 볼 수 있습니다.
표준은 W3C CSS Scrollbars Styling Level 1 의 scrollbar-width와 scrollbar-color입니다. scrollbar-color는 썸 색을 먼저, 트랙 색을 나중에 적는 두 값 속성이고 scrollbar-width는 auto·thin·none 키워드만 받습니다. 비표준 ::-webkit-scrollbar 계열은 px 두께와 호버 색까지 세밀하게 다룰 수 있지만 표준 명세에는 없습니다. 두 블록을 같은 요소에 두면 표준을 지원하는 브라우저가 표준 쪽을 쓰고 비표준 선언을 버립니다(2026년 10월 기준).
미리보기는 이 브라우저가 지원하는 쪽을 그린 결과이므로 다른 브라우저에서는 모양이 다를 수 있습니다. 이 도구는 스크롤바 자리를 미리 비워 두는 처리나 가로·세로 스크롤바를 서로 다르게 꾸미는 코드는 만들지 않습니다. 스크롤바를 숨기면 스크롤 가능 여부를 알기 어려워지므로 신중히 결정하세요.
자주 묻는 질문
scrollbar-width와 scrollbar-color가 표준입니다. ::-webkit-scrollbar 계열은 표준 명세에 없는 WebKit 전용 확장이라 다른 엔진에서는 무시됩니다.
표준 scrollbar-width는 auto·thin·none 키워드만 받습니다. px 단위 두께가 필요하면 비표준 블록을 함께 넣어야 합니다.
아니요. 표준 속성을 지원하는 브라우저는 표준 쪽만 적용하고 ::-webkit- 선언을 무시합니다. 그래서 두 블록을 함께 둬도 충돌하지 않습니다.