css를 사용하여 브라우저 스크롤바의 스타일을 변경하는 방법에 대하여 알아봅니다. 커스텀 스크롤바라고도 부릅니다.



# 브라우저 스크롤바를 바꾸는 방법은?먼저 스크롤바의 스타일을 바꾸기 전에 알아야할 사항이 몇 가지 있습니다. 하나는 스크롤바에 css를 적용할 수 있다는 점이고 다른 하나는 가능하지만 상당히 제한적이라는 부분입니다. 어찌보면 스크롤바는 웹콘텐츠가 아닌 브라우저의 인터페이스이므로 제어하는 방식이 css와 다른 점이 이해가 됩니다. 그렇다면 각 브라우저에 스크롤 스타일을 바꾸는 방법을 알아봅니다.



! 크롬, 사파리 등의 웹킷 엔진에서 변경할 경우의 방법먼저 크롬, 사파리 계열의 웹킷엔진입니다. 아래처럼 여러가지 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

@ 웹킷 엔진의 css 예제보기
다음 스크린샷은 아래에 있는 예제 코드를 실행할때 나타나는 화면입니다. 참고로 이처럼 스크롤바를 사용할 경우 ::-webkit-scrollbar의 선언이 꼭 필요합니다.

스크린샷) 선택 가능한 각각의 스크롤 스타일 적용 위치 

@ scrollbar.html
<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;
}



! ::-webkit-scrollbar-track 또는 ::-webkit-scrollbar-thumb width 설정하는 방법
만약 스크롤바 트랙(track)이나 버튼(thumb)의 width 값을 조정할 경우 ... 특히 ::-webkit-scrollbar-track은 스크롤바의 크기보다 작거나 크게 width 조절이 어렵습니다. 이 경우 background와 border를 사용하여 조절하는 방법이 있습니다.

방법은 border-left 또는 border-right의 값으로 transparent를 주어 투명하게 만든 후 background 색의 적용을 제한하는 방법입니다. 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: 16px;
scrollbar-color: color: #999999;

아래는 스크롤바를 감추는 방법입니다.
overflow-x: -moz-scrollbars-none; /* Firefox scrollbar hide */


! 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;
}

아래는 IE에서 스크롤바를 숨기는 방법입니다. 스크롤바는 동작하나 보이지 않게 하려면 이 방법을 사용합니다.
-ms-overflow-style: none;
overflow: auto;
여기까지 스크롤바의 스타일을 바꾸는 방법을 알아보았습니다.