[CSS] Scrollbar - 스크롤바 색 변경, 투명화 등

Anna·2023년 7월 2일

우선, 스크롤바 스타일에 대한 웹 표준은 아직 없는 것 같습니다. 표준화된 방법(standardized method)으로 scrollbar-color 등의 속성이 있긴 하지만, 사실상 많은 브라우저에서 지원하지 않고 있지요. 반면, 크롬, 엣지, 사파리 등 블링크(blink)나 웹킷(WebKit)을 지원하는 브라우저에서는 ::-webkit-scrollbar 등 CSS 가상 요소로 스크롤바의 스타일을 변경할 수 있습니다.

여기서는 웹킷을 이용해 스크롤바의 외형을 바꾸는 방법을 알아보겠습니다. 파이어폭스 등에서는 지원하지 않고, 브라우저에 따라 표시 방식이 조금씩 다른 부분이 있다는 점 주의해 주세요.

스크롤바의 구성

스크롤바는 크게 시작과 끝의 화살표 버튼(button), 페이지에서 현재 어디를 보여주고 있는지 나타내는 막대기(thumb, 이하 썸), 막대기가 움직이는 공간(track, 이하 트랙)으로 구성됩니다.

스크롤바 영역 내에 버튼과 트랙 영역이 있고, 트랙 영역 내에서 썸이 이동합니다.

스크롤바 요소별 설정

::-webkit-scrollbar

스크롤바 전체에 대한 설정을 할 수 있습니다. 세로 스크롤바의 경우 width로 너비를, 가로 스크롤바의 경우 height로 높이를 지정합니다.

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

스크롤바를 감추고 싶은 경우에는 display: none으로 설정하면 됩니다. 스크롤바가 보이는지 여부와 관계없이, 스크롤 동작은 정상적으로 작동합니다.

::-webkit-scrollbar-track / ::-webkit-scrollbar-thumb

트랙과 썸은 설정할 수 있는 속성이 비슷합니다. 배경색이나 배경 이미지를 지정하고, 테두리(border)를 설정할 수 있습니다.

::-webkit-scrollbar {
    width: 20px;
    height: 20px;
}
::-webkit-scrollbar-track {
    background-color: rgba(170, 204, 255, 0.5);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    background-image: url("thumb.png");
    border-radius: 10px;
}

위 예제에서는 트랙에 알파값(투명도)를 0.5로 설정해 반쯤 투명하게 만들었는데요. 트랙을 완전히 투명하게 만들고 싶은 경우, 알파값을 0으로 하거나 display:none으로 설정하면 됩니다. 물론 썸에도 동일하게 적용되고, 앞의 ::-webkit-scrollbar와 마찬가지로 스크롤바가 보이는지와 스크롤 동작은 별개입니다.

더불어 :hover 같은 가상 클래스(pseudo-class)도 동작하니, 마우스를 올렸을 때만 표시하거나 강조하는 식으로도 사용할 수 있습니다. 뭐, 쓸모가 있는지는 차지하고요.

::-webkit-scrollbar-track {
    display: none;
}
::-webkit-scrollbar-track:hover {
    background-color: lightgray;
}
::-webkit-scrollbar-thumb {
    background-color: lightblue;
}
::-webkit-scrollbar-thumb:hover {    
    background-color: lightcoral;
}

세로/가로 스크롤바 중 한쪽에만 적용하고 싶다면, 가상 클래스 :vertical, :horizontal을 사용하면 됩니다. 트랙과 썸 모두 사용 가능합니다.

::-webkit-scrollbar-thumb:vertical {
    border-bottom: solid 2px gray;
}

::-webkit-scrollbar-button

웹킷으로 스크롤바를 설정하면 버튼이 자동으로 만들어지지 않습니다. 배경 이미지를 넣거나 svg 등으로 추가해야 합니다. 스크롤바 방향과 버튼 위치에 따라 화살표 방향이 다르니 각각 넣어줘야겠죠. 앞에서 본 :vertical, :horizontal에 :start, :end를 조합해 각 버튼을 설정할 수 있습니다.

::-webkit-scrollbar-button:vertical:start  {
    background-image: url("up.png");
}
::-webkit-scrollbar-button:vertical:end  {
    background-image: url("down.png");
}

::-webkit-scrollbar-corner

가로/세로 스크롤바가 모두 표시되는 경우, 두 스크롤바의 사이 코너 영역입니다. 환경에 따라서는 창의 크기를 조절하는 핸들(resizer, 이하 리사이저)이 위치하기도 합니다.

앞에서와 마찬가지로 배경색이나 이미지 등을 설정할 수 있습니다. 참고로 리사이저는 ::-webkit-resizer로 설정할 수 있습니다.

투명한 스크롤바 사용예

트랙은 투명하고, 버튼은 없고, 썸만 존재하는 스크롤바를 만들어 보겠습니다.

::-webkit-scrollbar {
    display: block;
}
::-webkit-scrollbar-track, ::-webkit-scrollbar-button {
    display: none;
}
::-webkit-scrollbar-thumb {
    background-color: lightblue;
}