위린이
스크롤바는 작은 영역이지만 UI 관점에서 무시하기엔 아쉬운 요소다. CSS만으로 커스터마이징할 수 있다.
표준 속성 (권장)
Chrome 121+, Firefox 64+, Edge 121+, Safari 18.2+에서 scrollbar-color와 scrollbar-width를 지원한다. 이게 현재 권장 방식이다.
body {
scrollbar-width: thin; /* auto | thin | none */
scrollbar-color: #babac0 #fff; /* thumb-color track-color */
}
두 줄이면 대부분의 경우 충분하다. -webkit-scrollbar보다 세밀한 조정은 안 되지만, 표준이라는 점이 핵심이다.
macOS와 iOS는 오버레이 스크롤바라 스타일링 차이가 크게 티 나지 않지만, Windows는 항상 스크롤바 공간을 차지하는 방식이라 디자인 일관성을 위해 조정이 필요하다. 모바일 브라우저는 대부분 오버레이 방식이라 건드릴 여지가 적다. 한동안 -webkit-scrollbar에만 의존해왔는데 표준 속성이 안정화되면서 상황이 바뀌었다. 기본은 표준 속성으로 가고, 더 정밀한 스타일링이 필요한 경우에만 웹킷 가상 요소를 폴백으로 두는 게 요즘 권장 패턴이다.
-webkit-scrollbar (레거시)
border-radius나 border 같은 세밀한 스타일링이 필요하면 -webkit-scrollbar 가상 요소를 쓸 수 있다. Chromium과 Safari에서 동작한다.
주의: Chrome 121부터 표준 속성과
-webkit-scrollbar가 동시에 있으면 표준 속성이 우선한다.@supports로 분리하는 게 안전하다.
/* 표준 속성 우선 */
body {
scrollbar-width: thin;
scrollbar-color: #babac0 #fff;
}
/* 표준 미지원 브라우저용 폴백 */
@supports not (scrollbar-width: thin) {
body::-webkit-scrollbar {
background-color: #fff;
width: 16px;
}
body::-webkit-scrollbar-track {
background-color: #fff;
}
body::-webkit-scrollbar-thumb {
background-color: #babac0;
border-radius: 16px;
border: 4px solid #fff;
}
body::-webkit-scrollbar-button {
display: none;
}
}
가상 요소 목록
::-webkit-scrollbar /* 스크롤바 전체 영역 */
::-webkit-scrollbar-button /* 상하 방향 버튼 */
::-webkit-scrollbar-track /* 스크롤바 트랙 */
::-webkit-scrollbar-track-piece /* thumb이 덮지 않는 영역 */
::-webkit-scrollbar-thumb /* 드래그 가능한 스크롤바 본체 */
::-webkit-resizer /* 하단 리사이저 */
::-webkit-scrollbar-corner /* 하단 코너 */
-webkit-scrollbar-button은 상하 방향 화살표인데 대부분의 경우 display: none으로 숨기는 게 깔끔하다. track-piece는 thumb이 덮지 않는 영역만 별도로 스타일링할 때 쓰고, 단순 배경만 바꾸려면 track으로 충분하다. 폴백 블록에서 @supports not (scrollbar-width: thin)을 쓰면 표준 지원 브라우저에서 웹킷 스타일이 자동으로 무시되므로 중복 적용 걱정은 없다. border-radius, border 같은 세밀한 조정은 표준 속성으로 불가능해서 웹킷 가상 요소가 여전히 유용한 지점이다.
적용 예제
macOS 스타일 스크롤바를 크로스 브라우저로 적용하는 최소 코드다.
/* 표준 */
body {
scrollbar-width: thin;
scrollbar-color: #babac0 #fff;
}
/* Webkit 폴백 */
@supports not (scrollbar-width: thin) {
body::-webkit-scrollbar {
background-color: #fff;
width: 16px;
}
body::-webkit-scrollbar-track {
background-color: #fff;
}
body::-webkit-scrollbar-thumb {
background-color: #babac0;
border-radius: 16px;
border: 4px solid #fff;
}
}
브라우저 지원
scrollbar-color와 scrollbar-width는 Chrome 121+, Edge 121+, Firefox 64+, Safari 18.2+에서 지원한다. 구형 브라우저는 -webkit-scrollbar가 폴백으로 동작한다.
최신 지원 현황은 caniuse.com에서 확인할 수 있다.
주의할 부분은 thumb과 track의 색상 대비다. 밝은 배경에 옅은 thumb 색상을 쓰면 사용자가 스크롤 여부를 알아보기 힘들어져 접근성 이슈가 된다. WCAG 기준 3:1 이상의 명도 대비를 권장한다. 다크 모드까지 고려한다면 :root와 [data-theme=dark]에 각각 scrollbar-color를 선언해 테마 전환에 맞춰 따라가게 하는 패턴이 가장 깔끔하다.
