CSS를 활용하면 웹 브라우저의 기본 스크롤바를 자유롭게 디자인할 수 있습니다. 스크롤바의 두께, 색상, 모서리 둥글기 등을 조절해 사이트 전체 분위기에 어울리는 개성 있는 스크롤바를 손쉽게 구현할 수 있습니다.
주요 CSS 가상 요소
커스텀 스크롤바를 만들 때 사용하는 대표적인 가상 요소는 다음과 같습니다.
- ::-webkit-scrollbar — 스크롤바 전체 영역의 너비와 높이를 지정합니다.
- ::-webkit-scrollbar-track — 스크롤바의 배경(트랙) 부분 스타일을 지정합니다.
- ::-webkit-scrollbar-thumb — 실제로 드래그하는 스크롤 막대(썸)의 스타일을 지정합니다.
- ::-webkit-scrollbar-thumb:hover — 마우스 포인터를 올렸을 때 썸에 적용되는 스타일을 지정합니다.
예제 코드
다음은 보라색 계열의 커스텀 스크롤바를 구현한 전체 예제입니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
height: 200vh; /* 스크롤바 생성을 위한 높이 설정 */
}
::-webkit-scrollbar {
width: 20px;
}
p {
font-size: 40px;
}
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background: rgb(75, 22, 161);
border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
background: #9156ff;
}
</style>
</head>
<body>
<h1>Custom Scrollbar Example</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, rerum. Placeat molestias
quisquam doloremque, perferendis aspernatur quod cupiditate cumque porro cum facilis vel
dolorem fuga dolore quae deserunt sint inventore distinctio et, modi sunt! Commodi omnis
adipisci autem enim, perferendis, modi possimus quos, ducimus error hic natus voluptate.
Error, rem!
</p>
</body>
</html>
실행 결과
위 코드를 실행하면 아래 화면처럼 짙은 보라색의 커스텀 스크롤바가 나타납니다. 스크롤 막대에 마우스를 올리면 밝은 보라색(#9156ff)으로 색상이 바뀌는 호버 효과도 확인할 수 있습니다.
브라우저 호환성 주의사항
::-webkit-scrollbar 계열 속성은 Chrome, Safari 등 WebKit 기반 브라우저에서만 동작하며, IE, 구버전 Edge, Firefox에서는 적용되지 않습니다. Firefox에서 커스텀 스크롤바를 구현하려면 scrollbar-color와 scrollbar-width 속성을 별도로 사용해야 하며, 최신 Chromium 기반 Edge에서는 WebKit 방식이 정상적으로 지원됩니다.