스크롤바의 색상 또는 두께 맞춤설정하기

웹 기능: scrollbar-color scrollbar-width

표준 CSS 속성 scrollbar-color 및 scrollbar-width를 사용하여 스크롤바의 모양을 맞춤설정할 수 있습니다.

  • scrollbar-color: 두 개의 <color> 값을 허용합니다. 첫 번째는 엄지 (움직이는 부분)에 적용되고 두 번째는 트랙 (고정된 배경)에 적용됩니다.
  • scrollbar-width: auto (기본값), thin (더 얇은 변형) 또는 none (스크롤 가능성을 유지하면서 스크롤바를 완전히 숨김)를 허용합니다.

scrollbar-color 및 scrollbar-width 적용

필수: 스크롤 가능한 컨테이너에 scrollbar-color 및 scrollbar-width를 사용합니다.

scrollbar-color를 사용할 때는 가독성과 유지보수성을 위해 (특히 대체 기능을 사용할 때) CSS 변수를 사용하여 엄지손가락과 트랙 색상을 별도로 유지하세요.

.scroller {
  --scrollbar-thumb: var(--color-neutral-70);
  --scrollbar-track: var(--color-neutral-90);

  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

대체 전략

scrollbar-color의 대체 및 브라우저 지원

이 기능은 점진적 개선이며 항상 대체가 필요한 것은 아닙니다.

스타일 지정이 중요하고 사용자의 기준 타겟이 '기준 널리 사용 가능' 이하인 경우 비표준 ::-webkit-scrollbar 가상 요소를 대체로 포함해야 합니다(SHOULD).

기존 대체 항목을 @supports not (scrollbar-color: auto) 블록으로 래핑하여 두 가지를 모두 기본적으로 지원하는 브라우저에서 표준 속성과 기존 WebKit 선택기 간의 충돌을 방지합니다.

맞춤 속성을 사용하여 색상을 정의하는 경우 기존 WebKit 선택기에 자동으로 적용됩니다. 중복으로 만들 필요는 없습니다.

/* Legacy fallback for WebKit/Blink browsers */
@supports not (scrollbar-color: auto) {
  .scroller::-webkit-scrollbar {
    /* Must define base size in WebKit for custom colors to be visual */
    width: 12px;
    height: 12px;
  }

  .scroller::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
  }

  .scroller::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
  }
}