윈도우와 맥의 가장 큰 차이점 중 하나는 scroll bar의 기본 디자인이 매우 다르다는 것이다. 이 때문에 원하는 디자인을 만들 수가 없는 경우가 있다. 따라서 디자인을 통일시켜야 하며 이를 위해 기본적인 scroll bar의 디자인을 살펴보자.

webkit 브라우저(파이어폭스 외)에 대해서만 먼저 살펴보자

wibkit 브라우저 스크롤바 속성

1. ::webkit-scrollbar: 스크롤바 전체
2. ::webkit-scrollbar-thumb: 페이지의 위치를 알려주는 막대
3. ::webkit-scrollbar-track: 스크롤이 움직이는 영역
4. ::webkit-scrollbar-button: 스크롤 방향 버튼
5. ::webkit-scrollbar-track-piece: track에서 thumb을 제외한 부분
6. ::webkit-scrollbar-corner: 수직, 수평 스크롤이 만나는 부분
7. ::webkit-scrollbar-resizer: 크기 조정 핸들

firefox와 IE이용자가 매우 드물기에 이 속성만 이용해서 스크롤 설정해도 충분하다.