[CSS] scrollbar에 대한 이해

Jay ·2023년 12월 15일

CSS FDBS

1. Scrollbar?

CSS로 Scrollbar를 스타일링 하는 것은 생각보다 신경쓸 부분이 적지 않다.

그 이유는 CSS Scrollbar 속성은 표준이 아니기 때문이다.
따라서 브라우저 별로 그 구현이 상이한데, 이는 크게 두가지로 분류할 수 있다.

Webkit 엔진에 기반한 브라우저들(Chrome, Safari, MS edge)이 첫 번째로,
-webkit-scrollbar 접두사를 사용해 스크롤바를 스타일링을 지원한다.

다른 하나는 Firefox이다.
gecko 엔진을 사용하며 webckit보다는 적지만 별도의 스타일링 방법을 지원한다.

2. Scroll bar 속성

::-webkit-scrollbar

전체 스크롤바

::-webkit-scrollbar-thumb

마우스로 드래그 할 수 있는 핸들러

::-webkit-scrollbar-track

thumb가 지나다니는 트랙 혹은 프로그레스 바

::-webkit-scrollbar-button

track 양 끝의 화살표가 있는 버튼

::-webkit-scrollbar-corner

수평, 수직 스크롤바가 만나는 부분의 네모난 박스 부분.

::-webkit-scrollbar-resizer

드래그 가능한 핸들러로, 리사이징을 담당.

위는 Webkit기반 스크롤바에 대한 설명이고, firefox도 크게 다르지 않다.

3. 스타일링 예시

scrollbar property를 사용하면 기존 스크롤바의 모든 css 스타일링이 초기화된다.

 /* 예시 */
body {
  overflow-y: scroll;
}

body::-webkit-scrollbar {
  width: 8px; 
  /* width는 세로 스크롤바에만 적용된다. */
  /* height: 8px; */ 
  /* 마찬가지로 height는 가로 스크롤바에만 적용된다 */
}

body::-webkit-scrollbar-track {
  background: white;
}

body::-webkit-scrollbar-thumb {
  background-color: hsl(0, 0%, 45%);
  border-radius: 20px;
  background-clip: padding-box;
  border: 2px solid transparent;
}

body::-webkit-scrollbar-thumb:hover {
  background: hsl(0, 0%, 70%);
  background-clip: padding-box;
  border: 2px solid transparent;
}