scrollbar-width 및 scrollbar-color 속성을 사용하여 스크롤바의 스타일을 지정합니다.
소개
Chrome 버전 2부터 ::-webkit-scrollbar-* 의사 요소로 스크롤바의 스타일을 지정할 수 있었습니다. 이 접근 방식은 Chrome과 Safari에서는 잘 작동하지만 CSS Working Group에서는 표준화하지 않았습니다.
표준화된 것은 scrollbar-width 및 scrollbar-color 속성이며, 이 속성은 CSS 스크롤바 스타일 지정 모듈 레벨 1 사양의 일부입니다. 이러한 속성은 Chrome 121부터 지원됩니다.
스크롤바 101
스크롤바 분석
스크롤바는 최소한 트랙과 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. */
}
::-webkit-scrollbar-*로 대체하고 scrollbar-*를 사용하여 스크롤바 스타일을 지정하고 마우스 오버 시 ::-webkit-scrollbar-* 색상만 적용합니다.