스크롤바 스타일 지정

scrollbar-width 및 scrollbar-color 속성을 사용하여 스크롤 막대의 스타일을 지정합니다.

Bramus

소개

Chrome 버전 2부터 ::-webkit-scrollbar-* 의사 요소를 사용하여 스크롤바의 스타일을 지정할 수 있습니다. 이 접근 방식은 Chrome과 Safari에서는 잘 작동하지만 CSS 워킹 그룹에서 표준화하지는 않았습니다.

표준화된 것은 CSS 스크롤 막대 스타일 지정 모듈 수준 1 사양의 일부인 scrollbar-width 및 scrollbar-color 속성입니다. 이러한 속성은 Chrome 121부터 지원됩니다.

Browser Support

• 121
• 121
• 64
• 26.2

Source

스크롤 막대 101

스크롤바의 구조

스크롤바는 최소한 트랙과 엄지로 구성됩니다. 트랙은 썸이 이동할 수 있는 영역입니다. 트랙은 전체 스크롤 거리를 나타냅니다. 썸은 스크롤 가능한 영역 내의 현재 위치를 나타냅니다. 스크롤하면 트랙 내에서 이동합니다. 썸은 드래그할 수 있는 경우가 많습니다.

스크롤바에는 엄지와 트랙 외에도 더 많은 부분이 있을 수 있습니다. 예를 들어 스크롤바에는 스크롤 오프셋을 늘리거나 줄이는 버튼이 하나 이상 있을 수 있습니다. 스크롤바를 구성하는 부분은 기본 운영체제에 따라 결정됩니다.

스크롤바로 구성된 부분의 그림입니다. 왼쪽의 그림은 트랙과 엄지손가락만 있는 최소한의 스크롤바입니다. 오른쪽에도 버튼이 있습니다.

클래식 및 오버레이 스크롤바

스크롤 막대의 스타일을 지정하는 방법을 살펴보기 전에 두 가지 유형의 스크롤 막대를 구분하는 것이 중요합니다.

오버레이 스크롤바

오버레이 스크롤바는 아래 콘텐츠 위에 렌더링되는 플로팅 스크롤바입니다. 기본적으로는 표시되지 않으며 사용자가 스크롤하는 동안에만 표시됩니다. 아래 콘텐츠를 계속 표시하기 위해 반투명한 경우가 많지만 이는 운영체제에서 결정합니다. 이러한 요소와 상호작용하는 동안 크기가 달라질 수도 있습니다.

오버레이 스크롤바가 있는 브라우저의 그림입니다. 스크롤바가 콘텐츠를 오버레이하고 엄지손가락이 부분적으로 투명합니다.

클래식 스크롤바

클래식 스크롤바는 전용 스크롤바 거터에 배치된 스크롤바입니다. 스크롤바 거터는 내부 테두리 가장자리와 외부 패딩 가장자리 사이의 공간입니다. 이러한 스크롤바는 일반적으로 불투명하며 인접한 콘텐츠의 공간을 일부 차지합니다.

기존 스크롤 막대가 있는 브라우저의 그림입니다. 스크롤바가 전용 영역의 콘텐츠 옆에 배치됩니다. 오버레이 스크롤바를 사용할 때의 사용 가능한 너비와 비교하여 콘텐츠의 사용 가능한 너비가 축소됩니다.

scrollbar-color 및 scrollbar-width 속성

scrollbar-color로 스크롤바에 색상 지정

scrollbar-color 속성을 사용하면 스크롤바의 색 구성표를 변경할 수 있습니다. 이 속성은 두 개의 <color> 값을 허용합니다. 첫 번째 <color> 값은 썸의 색상을 결정하고 두 번째 값은 트랙에 사용할 색상을 결정합니다.

.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;
}

오버레이 스크롤바를 사용하면 스크롤 가능한 영역을 적극적으로 스크롤하는 동안에만 썸이 그려집니다.

데모: 스크롤 막대 스타일 지정: 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);
    }
}

데모: scrollbar-*를 사용하여 스크롤 막대 스타일 지정(::-webkit-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-* 색상 적용