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

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

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

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

시작하기

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

브라우저 스크롤바 커스터마이즈는 비표준이라 -webkit- 벤더 프리픽스가 필요하고, WebKit 기반 브라우저(Chrome, Safari)에서만 동작합니다. Firefox나 IE는 지원하지 않습니다.

가상 요소

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

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

CodePen

CodePen에서 실제로 동작을 확인해 보세요. IE나 Firefox에서는 CSS가 동작하지 않으며, JavaScript가 박스에 대체 텍스트를 출력합니다.

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월 5일) 기준, caniuse.com에 따르면 87.07%의 브라우저가 ::-webkit-scrollbar를 지원합니다. 최신 정보는 caniuse.com에서 확인할 수 있습니다.

다시 강조하지만, 이 방법은 WebKit 기반 브라우저에서 벤더 프리픽스와 함께만 동작하며, 그 외에는 작동하지 않습니다. 읽어주셔서 감사합니다!