CSS 스크롤바 생성기

최신 표준 속성 (2023년 이후)

/* Applies to the element that scrolls */
html {
  scrollbar-width: thin;           /* auto | thin | none */
  scrollbar-color: #4f46e5 #e5e7eb; /* thumb track */
}

브라우저 지원 (2024):

• scrollbar-width: Chrome 121+, Safari 18.2+, Firefox 64+.
• scrollbar-color: Chrome 121+, Safari 18.2+, Firefox 64+.
• scrollbar-gutter: stable: Chrome 94+, Safari 14+, Firefox 97+. 필요 없을 때도 스크롤바 공간을 예약해 레이아웃 시프트를 방지합니다.

Webkit 의사 요소 (Chrome, Safari, 구형 Edge)

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #e5e7eb;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: #4f46e5;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #3730a3;
}

더 세밀한 제어. width는 세로 스크롤바 너비를, height는 가로 스크롤바 높이를 설정합니다. 양방향으로 스크롤되는 컨테이너에는 둘 다 추가하세요.

두 접근법 캐스케이드하기

최신 규칙을 먼저 지정하고, 둘 다 렌더링하는 브라우저를 위한 향상으로 webkit을 추가하세요:

.scroll-area {
  scrollbar-width: thin;
  scrollbar-color: #4f46e5 #e5e7eb;
}
.scroll-area::-webkit-scrollbar       { width: 8px; }
.scroll-area::-webkit-scrollbar-track { background: #e5e7eb; }
.scroll-area::-webkit-scrollbar-thumb {
  background: #4f46e5;
  border-radius: 4px;
  border: 2px solid #e5e7eb;
}

Firefox는 최신 scrollbar-* 규칙만 따릅니다. Chrome과 Safari는 webkit 규칙을 따르며, 이 규칙이 최신 규칙을 덮어쓰기 때문에 동작이 일관됩니다.

scrollbar-gutter는 콘텐츠 시프트를 방지합니다

예약된 거터가 없으면 스크롤바가 나타날 때 콘텐츠가 리플로우됩니다(동적 리스트에서 흔함). 해결:

html { scrollbar-gutter: stable; }
/* or */
html { scrollbar-gutter: stable both-edges; }

콘텐츠가 스크롤되든 아니든 스크롤바 슬롯이 예약됩니다. both-edges는 콘텐츠를 시각적으로 가운데 유지하기 위해 반대편에 일치하는 거터를 추가합니다.

스크롤바 완전히 숨기기

.no-scrollbar {
  scrollbar-width: none;           /* Firefox */
}
.no-scrollbar::-webkit-scrollbar { display: none; }  /* Chrome, Safari */

주의: 스크롤바를 숨기면 사용자가 콘텐츠를 스크롤할 수 있다는 사실을 알 수 없게 됩니다. 명확한 표시(화살표, 페이지 도트)와 함께 쓰거나, 스크롤 동작이 맥락상 명백한 경우(가로 캐러셀, 채팅 기록)에만 사용하세요.

모바일 고려 사항

iOS와 Android에서는 스크롤바가 스크롤 중에만 잠깐 나타납니다. 커스텀 스크롤바 CSS는 여전히 적용되지만, 사용자는 1초 이상 보지 못할 수 있습니다. 그에 맞게 설계하세요, 거의 나타나지 않는 시각적 화려함에 과도하게 투자하지 마세요.

접근성

• 대비: track 대비 thumb는 비텍스트 대비 3:1을 충족해야 합니다(WCAG 1.4.11).
• 너비: 얇은 스크롤바는 마우스로 잡기 어렵습니다. 특히 운동 장애가 있는 사용자에게 그렇습니다. 보통 너비가 더 안전한 기본값입니다.
• 다른 스크롤 어포던스를 제공하지 않고 스크롤 영역의 스크롤바를 절대 제거하지 마세요. 스크롤바에 의존하는 사용자는 갇히게 됩니다.