크롬, 사파리 등의 웹킷 엔진에서 변경할 경우 방법
먼저 크롬, 사파리 계열의 웹켓엔진입니다. 아래처럼 여러가지 CSS 스타일 속성을 사용 할 수 있습니다.
 

::-webkit-scrollbar
::-webkit-scrollbar-button
::-webkit-scrollbar-button:start
::-webkit-scrollbar-button:end
::-webkit-scrollbar-button:vertical:increment
::-webkit-scrollbar-button:vertical:decrement
::-webkit-scrollbar-track
::-webkit-scrollbar-track-piece
::-webkit-scrollbar-thumb
::-webkit-scrollbar-corner
::-webkit-resizer

 

<div>
  <span style="white-space:nowrap">1 2 3 4 5 6 7 8 9 10 11 12 13 14 15</span>
  2<br />
  3<br />
  4<br />
  5<br />
  6<br />
  7<br />
  8<br />
  9<br />
  10<br />
  11<br />
  12<br />
  13<br />
  14<br />
  15<br />
</div>

scrollbar.css

div {
  width: 200px;
  height: 200px;
  overflow: scroll;
}

::-webkit-scrollbar {
  width: 10px;  /* 세로축 스크롤바 길이 */
  height: 20px;  /* 가로축 스크롤바 길이 */
}
::-webkit-scrollbar-track {
  background-color: lightblue;
}
::-webkit-scrollbar-track-piece {
  background-color: gray;
}
::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: black;
}
::-webkit-scrollbar-button {
  background-color: darkblue;
  width: 20px;
  height: 10px;
}
::-webkit-scrollbar-button:start {
  background-color: red; /* Top, Left 방향의 이동버튼 */
}
::-webkit-scrollbar-button:end {
  background-color: orange; /* Bottom, Right 방향의 이동버튼 */
}
::-webkit-scrollbar-button:vertical:increment {
}
::-webkit-scrollbar-button:vertical:decrement {
}
::-webkit-scrollbar-corner {
  background-color: violet; /* 우측 하단의 코너 부분 */
}
::-webkit-resizer {
  background-color: green;
}

크롭브라우져

.scroll-test::-webkit-scrollbar {
  width: 6px;
}
.scroll-test::-webkit-scrollbar-track {
  background-color: transparent;
}
.scroll-test::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background-color: gray;
}
.scroll-test::-webkit-scrollbar-button {
  width: 0;
  height: 0;
}

FireFox

/* Firefox scrollbar */
.scroll-test {
  scrollbar-width: thin;
  scrollbar-color: gray transparent;
}

! ::-webkit-scrollbar-track 또는 ::-webkit-scrollbar-thumb width 설정하는 방법
만약 스크롤바의 트랙(track)과 버튼(thumb) 사이즈가 동일하게 변경하는 경우 width 값만 변경해 적용할 수 있습니다. 그런데 스크롤바 영역인 트랙(track)만 더 작게 하고 싶다면? 이 경우는  어떻게 할까요?

방법은 width 값만 사용하는 것이 아니라 border 스타일을 적용하는 방법입니다. ::-webkit-scrollbar-track에 background와 border를 사용하여 조절하는 방법을 알아봅니다.

예를들어 track을 더 작게 보일 수 있도록 border-left 또는 border-right 색을 transparent으로 지정합니다. 이렇게 하면 더 얇고 작은 크기의 트랙 스타일을 만들 수 있죠. 투명하게 적용 후 background-clip: content-box 또는 padding-box로 설정합니다.
 

::-webkit-scrollbar-track {
    width: 10px;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    background-color: red;
    background-clip: content-box;
}

이처럼 height 역시 border-top 또는 border-bottom에 transparent를 사용하는 방법으로 적용할 수 있습니다.


! 스크롤바 버튼의 화살표 이미지 바꾸기스크롤바의 버튼을 이미지로 바꿀수 있습니다. 이 경우 아래처럼 이미지 파일을 적용합니다.
@ 상하 방향 스크롤바의 화살표 바꾸기

::-webkit-scrollbar-button:vertical:increment {
    background: url(arrow_down.png) no-repeat center 50%;
}
::-webkit-scrollbar-button:vertical:decrement {
    background: url(arrow_up.png) no-repeat center 50%;
}

좌우방향 스크롤바 바꾸기

::-webkit-scrollbar-button:horizontal:increment {
    background: url(arrow_down.png) no-repeat center 50%;
}
::-webkit-scrollbar-button:horizontal:decrement {
    background: url(arrow_up.png) no-repeat center 50%;
}

모질라 파이어 폭스
2018년부터 일부의 스크롤바 스타일의 적용이 가능해졌습니다. 가능한 속성은 아래와 같습니다.

scrollbar-width
scrollbar-color


@ scrollbar-width
스크롤바의 크기를 조절합니다. 선택 가능한 값은 3가지 입니다.

auto // 기본값으로 보통 크기로 설정합니다.
none  // 스크롤바를 숨깁니다. 단, 동작은 합니다.
thin // 얇은 스크롤바를 보여줍니다.

scrollbar-color: black white; // 검은색 Thumb과 흰색 Track 설정시

body {
  scrollbar-width: thin;
  scrollbar-color: #e8e8e8 transparent;
}

! IE에서 스크롤바를 변경할 경우
IE(인터넷익스플로러) 역시 매우 제한적입니다. 크기, 이미지 등 많은 값을 조절할 수 없으며 간단한 색 변경 등만 가능합니다.

body {
  scrollbar-face-color: #e0e0e0;
  scrollbar-track-color: #fff;
  scrollbar-arrow-color: none;
  scrollbar-highlight-color: #e0e0e0;
  scrollbar-3dlight-color: none;
  scrollbar-shadow-color: #e0e0e0;
  scrollbar-darkshadow-color: none;
}

숨기는 방법

-ms-overflow-style: none;
overflow: auto;