이 포스트에서는 스크롤바의 모양을 바꾸는 CSS에 대해서 서술합니다.
다음 HTML 코드를 봅시다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Scrollbar CSS Sample</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style type="text/css">
/* Webkit (Chrome, Edge, Opera, Safari) */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background-color: #aaa; }
::-webkit-scrollbar-thumb { background-color: #000; }
/* Firefox only */
* {
scrollbar-color: #000 #aaa;
scrollbar-width: thin;
}
</style>
</head>
<body>
<!-- Contents -->
</body>
</html>
스크롤바 모양을 바꾼 예제를 다양하게 보여주려다 보니 샘플 코드가 너무 장황해져서 내용 부분은 생략하고 중요한 줄에 표시를 해 두었습니다.
10번 줄에서는 웹킷 기반 브라우저에서 스크롤바를 가리키는 의사요소 ::-webkit-scrollbar의 모양을 지정합니다.
width는 세로 스크롤바의 두께(폭), height는 가로 스크롤바의 두께(높이)입니다. 그리고 11번 줄의 의사요소 ::-webkit-scrollbar-track에 지정된 background-color는 스크롤바의 배경색입니다. 또 12번 줄에는 ::-webkit-scrollbar-thumb이라는 의사요소가 또 있는데 여기서는 스크롤바에서 잡는 부분을 background-color로 바꿀 수 있습니다. 그 외에도 좀 더 많은 스크롤바 관련 의사요소가 있습니다.
15번 줄과 16번 줄은 현재 파이어폭스에서만 가능한 스크롤바 CSS입니다. 15번 줄의 스크롤바 색은 잡는 부분 – 배경색 순으로 지정하며, 16번 줄에서는 스크롤바의 두께(auto, thin, none)를 지정할 수 있습니다. 웹킷 기반에 비해 지정 가능한 범위가 좁은 것이 흠입니다.
샘플 링크는 다음과 같습니다.
https://pjw48.net/samp/scrollbar_css_sample.html