CSS scrollbar-width 속성 – 스크롤바 두께 지정

`scrollbar-width` 속성의 이해

scrollbar-width 속성은 스크롤바의 두께(폭)를 지정합니다.

이 속성을 사용하면 스크롤바의 두께를 굵거나 가늘게 지정할 수 있습니다. 또한, 스크롤은 가능하지만 스크롤바를 표시하지 않게도 할 수 있습니다.

형식 구문

구문

CSS

/* 키워드 값 */
scrollbar-width: auto;
scrollbar-width: thin;
scrollbar-width: none;

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

형식 정의

scrollbar-width 속성의 형식 정의
초깃값	`auto`
적용 요소	scrolling boxes
상속	아니오
애니메이션	아니오

값

scrollbar-color 속성의 값
`auto`	초깃값임. 브라우저에서 제공하는 스크롤바의 기본 폭입니다.
`thin`	브라우저에서 제공하는 스크롤바의 기본 폭보다 가는 폭입니다.
`none`	스크롤바는 표시되지 않지만 요소는 여전히 스크롤 가능합니다.

예제

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-width: thin; /* 스크롤바 가늘게 하기 */
}

스크롤바를 숨기려면 scrollbar-width: none;으로 지정하면 됩니다. 이 경우에 스크롤바는 표시되지 않지만 요소는 여전히 스크롤 가능합니다.

접근성 고려사항

scrollbar-width 속성은 단순히 스크롤바 디자인을 바꾸기 위한 것이 아니라, 공간이 좁은 요소에서 스크롤바를 작게 보여줄 필요가 있을 때 사용하도록 설계된 것입니다.

스크롤바는 페이지와 상호작용하는 중요한 UI 요소이기 때문에, 운영체제나 브라우저는 사용자 친화성을 위해 일관된 스타일을 유지하려고 합니다.
사용자는 자신의 환경(운영체제나 브라우저 설정)을 통해 스크롤바 모양을 조정할 수도 있으므로, 특별한 UX(사용자 경험) 향상의 목적이 없다면 개발자가 사용자의 설정을 임의로 덮어쓰는 것은 피하는 것이 좋습니다.