scrollbar-width 및 scrollbar-color 속성을 사용하여 스크롤바의 스타일을 지정합니다.
소개
Chrome 버전 2부터 ::-webkit-scrollbar-* pseudo-elements로 스크롤바의 스타일을 지정할 수 있었습니다. 이 접근 방식은 Chrome과 Safari에서 잘 작동하지만 CSS Working Group에 의해 표준화되지 않았습니다.
표준화된 것은 scrollbar-width 및 scrollbar-color 속성이며, 이는 CSS 스크롤바 스타일 지정 모듈 레벨 1 사양의 일부입니다. 이러한 속성은 Chrome 121부터 지원됩니다.
스크롤바 101
스크롤바 분석
스크롤바는 최소한 트랙과 thumb으로 구성됩니다. 트랙은 thumb이 움직일 수 있는 영역입니다. 트랙은 전체 스크롤 거리를 나타냅니다. thumb은 스크롤 가능한 영역 내의 현재 위치를 나타냅니다. 스크롤하면 트랙 내에서 움직입니다. thumb도 드래그할 수 있는 경우가 많습니다.
하지만 스크롤바에는 thumb과 트랙 외에도 더 많은 부분이 있을 수 있습니다. 예를 들어 스크롤바에는 스크롤 오프셋을 늘리거나 줄이는 버튼이 하나 이상 있을 수 있습니다. 스크롤바를 구성하는 부분은 기본 운영체제에 따라 결정됩니다.
기본 및 오버레이 스크롤바
스크롤바의 스타일을 지정하는 방법을 알아보기 전에 두 가지 유형의 스크롤바의 차이를 이해하는 것이 중요합니다.
스크롤바 오버레이
오버레이 스크롤바는 아래에 있는 콘텐츠 위에 렌더링되는 플로팅 스크롤바입니다. 기본적으로 표시되지는 않지만 실제로 스크롤하는 동안에만 표시됩니다. 아래에 콘텐츠를 계속 표시하려면 보통 반투명하지만, 이는 운영체제에서 결정합니다. 상호작용 시 그 규모도 달라질 수 있습니다.
기존 스크롤바
기존 스크롤바는 전용 스크롤바 여백에 배치되는 스크롤바입니다. 스크롤바 여백은 안쪽 테두리 가장자리와 바깥쪽 패딩 가장자리 사이의 공간입니다. 이러한 스크롤바는 일반적으로 투명하지 않고 불투명하며 인접한 콘텐츠에서 공간을 약간 차지합니다.
scrollbar-color 및 scrollbar-width 속성
scrollbar-color로 스크롤바 색상 지정
scrollbar-color 속성을 사용하면 스크롤바의 색 구성표를 변경할 수 있습니다. 이 속성은 두 개의 <color> 값을 허용합니다. 첫 번째 <color> 값에 따라 thumb의 색상이 결정되고 두 번째 값이 트랙에 사용할 색상을 결정합니다.
.scroller {
scrollbar-color: hotpink blue;
}
오버레이 스크롤바를 사용하면 기본적으로 트랙의 색상이 적용되지 않습니다. 하지만 스크롤바에 마우스를 가져가면 트랙이 표시됩니다.
scrollbar-color운영체제에서 제공하는 기본 렌더링을 사용하려면 auto을 값으로 사용합니다.
scrollbar-width로 스크롤바 크기 변경
scrollbar-width 속성을 사용하면 더 좁은 스크롤바를 선택하거나 스크롤 가능 여부에 영향을 미치지 않고 스크롤바를 완전히 숨길 수도 있습니다.
허용되는 값은 auto, thin, none입니다.
auto: 플랫폼에서 제공하는 기본 스크롤바 너비입니다.thin: 플랫폼에서 제공하는 스크롤바의 얇은 변형이거나 기본 플랫폼 스크롤바보다 얇은 맞춤 스크롤바입니다.none: 스크롤바를 효과적으로 숨깁니다. 그래도 요소는 여전히 스크롤할 수 있습니다.
16px와 같은 <length>은 scrollbar-width 값으로 사용할 수 없습니다.
.scroller {
scrollbar-width: thin;
}
오버레이 스크롤바를 사용하는 경우 스크롤 가능한 영역을 활발하게 스크롤하는 동안에만 thumb이 그려집니다.
scrollbar-width이전 브라우저 버전 지원
scrollbar-color 및 scrollbar-width를 지원하지 않는 브라우저 버전을 지원하기 위해 새로운 scrollbar-* 및 ::-webkit-scrollbar-* 속성을 모두 사용할 수 있습니다.
.scroller {
--scrollbar-color-thumb: hotpink;
--scrollbar-color-track: blue;
--scrollbar-width: thin;
--scrollbar-width-legacy: 10px;
}
/* Modern browsers with `scrollbar-*` support */
@supports (scrollbar-width: auto) {
.scroller {
scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track);
scrollbar-width: var(--scrollbar-width);
}
}
/* Legacy browsers with `::-webkit-scrollbar-*` support */
@supports selector(::-webkit-scrollbar) {
.scroller::-webkit-scrollbar-thumb {
background: var(--scrollbar-color-thumb);
}
.scroller::-webkit-scrollbar-track {
background: var(--scrollbar-color-track);
}
.scroller::-webkit-scrollbar {
max-width: var(--scrollbar-width-legacy);
max-height: var(--scrollbar-width-legacy);
}
}
::-webkit-scrollbar-*으로 대체되는 scrollbar-*를 사용하여 스크롤바 스타일 지정::-webkit-scrollbar의 width 또는 height를 설정하면 오버레이 스크롤바가 항상 표시되어 효과적으로 기본 스크롤바로 바뀝니다.
착시 현상을 일으키지 않으려면 스크롤러에 마우스를 가져가는 경우에만 색상을 변경할 수 있습니다.
.scroller::-webkit-scrollbar-thumb {
background: transparent;
}
.scroller::-webkit-scrollbar-track {
background: transparent;
}
.scroller:hover::-webkit-scrollbar-thumb {
background: var(--scrollbar-color-thumb);
}
.scroller:hover::-webkit-scrollbar-track {
background: var(--scrollbar-color-track);
}
.scroller:hover {
--fix: ; /* This custom property invalidates styles on hover, thereby enforcing a style recomputation. This is needed to work around a bug in Safari. */
}
scrollbar-*를 사용하여 스크롤바의 스타일을 지정하고 ::-webkit-scrollbar-*로 대체하여 마우스 오버 시 ::-webkit-scrollbar-* 색상만 적용합니다.