scrollbar-color 속성의 이해

scrollbar-color 속성은 스크롤바의 색상을 지정합니다.

이 속성을 사용하면 스크롤바의 thumb과 track의 색상을 설정할 수 있습니다.

Scrollbar의 구성
스크롤바의 thumb과 track
CSS 데모: scrollbar-color 데모 버튼을 클릭해 보세요!

브라우저 호환성

마지막 업데이트 정보: 2025-04-23

scrollbar-color 속성의 데스크탑 브라우저 호환성
데스크탑
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
scrollbar-color 121 121 64 지원하지 않음

마지막 업데이트 정보: 2025-04-23

scrollbar-color 속성의 모바일 브라우저 호환성
모바일
속성
모바일 Chrome
Chrome
모바일 Firefox
Firefox
Safari
Safari
scrollbar-color 121 64 지원하지 않음

caniuse.com에서 더 자세한 정보를 확인해 보세요.

형식 구문

CSS 
selector {
    scrollbar-color: auto || [ <thumb color> <track color> ]
}

구문

CSS 
/* 키워드 값 */
scrollbar-color: auto;

/* <thumb color> <track color>
   CSS에서 사용할 수 있는 유효한 두 개의 컬러 값 
*/
scrollbar-color: blue red;
scrollbar-color: #0000ff red;
scrollbar-color: #0000ff #ff2c2c;

/* 전역 값 */
scrollbar-color: inherit;
scrollbar-color: initial;
scrollbar-color: revert;
scrollbar-color: revert-layer;
scrollbar-color: unset;

형식 정의

scrollbar-color 속성의 정의
초깃값 auto
적용 요소 scrolling boxes
상속 예
애니메이션
  • auto: 아니오
  • <thumb color> <track color>: 예

값

scrollbar-color 속성의 값
auto 초깃값임.
브라우저에서 제공하는 스크롤바의 기본 색상입니다.
<thumb color> <track color> 첫 번째 색상을 스크롤바의 thumb(드래그 가능한 스크롤 핸들)에 적용하고 두 번째 색상을 스크롤바의 track에 적용합니다.

예제

HTML 
<div class="container">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    In sagittis purus sit amet felis aliquam, at aliquam odio consequat.
    Morbi id faucibus turpis. Aenean risus mi,
    euismod vitae pulvinar vitae, ultricies vel dolor.
    Vivamus ac condimentum urna, sed condimentum orci.
    Mauris sed elit in lectus iaculis elementum id eget ante.
    Maecenas vulputate feugiat arcu, eu accumsan nisl pharetra eget.
    Vestibulum bibendum vehicula risus sed elementum.
    Duis porttitor sapien ut justo ultrices, vitae sollicitudin arcu lacinia.
    Aliquam volutpat elit non dui luctus efficitur.
</div>
CSS 
.container {
    padding: 0 0.5em;
    max-width: 360px;
    height: 150px;
    overflow: auto;
    scrollbar-color: green hotpink;
}
실제 적용 모습

접근성 고려사항

scrollbar-color 속성을 사용할 때는 thumb과 track 사이의 색상 대비(contrast)를 충분히 확보하는 것이 중요합니다.
색상이 서로 너무 비슷하면 시각적으로 구분하기 어려워져 스크롤바를 식별하기 어려울 수 있으며, 이는 사용자의 접근성에 부정적인 영향을 줄 수 있습니다.

WCAG 2.0의 G183 가이드라인에 따라, thumb과 track 사이에 최소 3:1의 명도 대비 비율(contrast ratio)을 갖추는 것을 권장합니다.

CSS 스크롤바(Scrollbars) 커스텀 스타일링

CSS 스크롤바(Scrollbars) 커스텀 스타일링을 참조하세요!

명세서

scrollbar-color 속성의 명세서 사양
명세서 사양
scrollbar-color CSS Scrollbars Styling Module Level 1
#scrollbar-color

참고문헌

같이 보기