CSS로 웹사이트 스크롤바 커스터마이즈하기

단 세 줄의 CSS로 macOS 같은 스크롤바 만들기

Chrome의 기본 스크롤바(왼쪽)와 커스텀 스크롤바(오른쪽)

스크롤바는 브라우저에서 작은 영역을 차지하지만, 인터페이스 디자이너 입장에서 그냥 넘길 만한 디테일은 아닙니다. 디테일에 집착하는 분이라면 이 짧은 튜토리얼이 도움이 될 거예요.

시작하기

웹사이트 스크롤바 커스터마이즈는 스타일시트의 몇 줄만으로 가능합니다 — JavaScript는 필요 없습니다. CSS는 다음과 같습니다.

::-webkit-scrollbar 계열의 가상 요소는 비표준 WebKit 확장이라 -webkit- 벤더 프리픽스가 필요하며, Chrome, Edge, Safari, Opera 등 Chromium 기반 브라우저와 Safari에서 동작합니다. Firefox는 ::-webkit-scrollbar를 지원하지 않지만, 2018년 12월에 출시된 Firefox 64부터 표준 CSS Scrollbars Module Level 1의 scrollbar-width·scrollbar-color 속성을 지원합니다. 따라서 Chromium 계열과 Firefox를 동시에 커버하는 일은 어렵지 않으며, 아래에서 그 방법을 함께 살펴봅니다.

Internet Explorer는 2022년 6월 공식 지원이 종료되어, 이제 스크롤바 스타일링 시 고려 대상이 아닙니다.

가상 요소

스크롤바 커스터마이즈에는 일곱 개의 가상 요소를 사용할 수 있습니다.

이번 튜토리얼에서는 ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb을 사용합니다. 각 속성은 괄호 안에 값을 받습니다.

Firefox와 표준 CSS Scrollbars

최신 Firefox(그리고 스펙을 따르는 다른 엔진)는 가상 요소 대신 두 개의 표준 속성을 사용합니다.

/* Firefox / CSS Scrollbars Module Level 1 */
html {
  scrollbar-width: thin;                /* auto | thin | none */
  scrollbar-color: #888 transparent;    /* thumb  track */
}

• scrollbar-width: thin은 macOS 스타일의 얇은 스크롤바를 만들어 줍니다.
• scrollbar-width: none은 스크롤바를 완전히 숨기면서도 스크롤 자체는 동작하게 유지합니다 — 과거에 쓰던 -webkit-scrollbar { display: none } 트릭 없이도 깔끔하게 스크롤바를 숨기는 크로스 브라우저 방법입니다.
• scrollbar-color는 색상을 두 개 받습니다: 앞이 thumb, 뒤가 track입니다.

두 접근 방식은 한 스타일시트 안에 함께 써도 안전합니다. WebKit 계열 브라우저는 ::-webkit- 규칙을 사용하고 표준 속성은 무시하며, Firefox는 그 반대로 동작합니다.

scrollbar-gutter로 레이아웃 점프 방지

알아두면 좋은 속성이 하나 더 있습니다. scrollbar-gutter: stable은 스크롤바가 보이지 않을 때에도 스크롤바 공간을 미리 확보해, 스크롤바가 나타날 때 콘텐츠가 튀는 현상을 막아 줍니다. Chrome 94+, Firefox 97+에서 지원됩니다.

html {
  scrollbar-gutter: stable;
}

CodePen

CodePen에서 실제 동작을 확인해 보세요. 원본 데모는 WebKit 스크롤바만 스타일링하므로, Firefox에서는 -webkit- 규칙이 무시되고 작은 JavaScript가 박스에 안내 문구를 출력합니다. 실제 사이트에서는 위에서 소개한 scrollbar-width·scrollbar-color를 함께 사용해 Firefox도 커버하는 것이 좋습니다.

See the Pen customize-scrollbar by Hyouk Seo (@Spemer) on CodePen.

제 스타일시트에서

이 사이트의 스크롤바는 단 세 줄의 CSS로 스타일링했습니다. JavaScript는 필요 없습니다.

라이브 버전은 제 사이트에서, CSS 코드는 GitHub에서 확인할 수 있습니다.

응용

GitHub Gist를 사이트에 임베드해 사용하는 경우, Gist의 스크롤바도 같은 방식으로 스타일링할 수 있습니다. 대상 요소의 클래스명이나 ID만 안다면 이 방법을 어디든 적용할 수 있습니다.

제 사이트에서 캡처

Gist 스니펫은 .blob-wrapper 클래스명을 사용하므로 위 CSS로 타겟팅할 수 있습니다.

브라우저 호환성

이 글을 처음 쓰던 2018년 1월에는 caniuse.com 기준 ::-webkit-scrollbar 지원율이 약 87%에 그쳤습니다. 이후 상황은 크게 개선되었습니다 — Chrome, Edge, Opera, Brave, Samsung Internet 등 모든 Chromium 계열과 Safari가 -webkit- 가상 요소를 지원하고, Firefox는 64 버전부터 표준 scrollbar-width·scrollbar-color를 지원합니다. 두 방식을 병행하면 현재 사용 중인 거의 모든 브라우저에서 스크롤바를 스타일링할 수 있습니다. 최신 지원 현황은 caniuse.com의 ::-webkit-scrollbar와 CSS Scrollbars 페이지에서 확인할 수 있습니다.

정리: Chromium과 Safari에서는 -webkit- 가상 요소로 세밀하게 스타일링하고, Firefox에는 표준 scrollbar-width·scrollbar-color를 제공하세요. 두 가지를 함께 쓰면 최신 브라우저 어디에서도 일관된 스크롤바 디자인을 얻을 수 있습니다. 읽어주셔서 감사합니다!