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



# CSS를 사용하여 브라우저 스크롤바를 바꾸는 방법은?먼저 스크롤바의 스타일을 바꾸기 전에 꼭 알아야 할 사항이 있습니다..


"css를 사용하여 브라우저 스크롤바 스타일을  바꿀 수는 있으나 매우 제한적이다."

생각해보면 스크롤바는 웹콘텐츠가 아닌 브라우저 내부 인터페이스이므로 일반적인 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;
}

그럼 간단한 예제도 만들어 보도록 하겠습니다.



# 크롬 등 웹킷 CSS 적용 예제보기
아래는 스크롤바를 얇게 구현하고 버튼을 보이지 않도록 바꾼 예제입니다. 최근에는 이런 모습의 스크롤바도 많이 사용됩니다.

<div class="scroll-test">
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10
</div>
<style>
.scroll-test {
overflow: scroll;
border: 1px solid #000;
width: 120px;
height: 120px;
}
.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;
}
</style>

적용된 css는 다음과 같습니다.
.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;
}

코드를 살펴보면 버튼을 숨기기 위해 width, height 값을 0을 주었고 트랙은 감축기 위해 배경색으로 transparent를 사용했습니다.

@ 참고, FireFox를 추가하면?
만약 여기에 파이어폭스를 가이 적용하려고 합니다. width가 얇기 때문에 thin 값을 사용하여 적용할 수 있습니다.
/* 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
스크롤바의 Thumb과 Track에 대한 스타일 지정이 가능합니다. 띄어쓰기로 사용할 색을 각각 지정하도록 합니다.
scrollbar-color: black white; // 검은색 Thumb과 흰색 Track 설정시

이제 간단한 방법을 알아봅니다. 만약 body 태그에 스크롤 스타일을 적용하려면 아래와 같이 css를 설정합니다.
body {
  scrollbar-width: thin;
  scrollbar-color: #e8e8e8 transparent;
}

여기까지 Firefox입니다. 웹킷에 비해 좀 더 제한적인 사용이 가능합니다.


! 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;
여기까지 스크롤바의 스타일을 바꾸는 방법을 알아보았습니다.