스크롤바 모양 바꾸는 CSS

이 포스트에서는 스크롤바의 모양을 바꾸는 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)를 지정할 수 있습니다. 웹킷 기반에 비해 지정 가능한 범위가 좁은 것이 흠입니다.

샘플 링크는 다음과 같습니다.
http://parkjuwan.dothome.co.kr/samp/scrollbar_css_sample.html

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 항목은 *(으)로 표시합니다