w3.css
사용자 정의 스크롤바
CSS를 사용하여 사용자 정의 스크롤바를 만드는 방법을 알아보자.
⭐ 사용자 정의 스크롤바는 Firefox 및 Edge 79 이전 버전에서는 지원되지 않는다.
사용자 정의 스크롤바를 만드는 방법
크롬, 엣지, 사파리, 오페라에서는 브라우저의 스크롤바 모양을 수정할 수 있는 비표준 ::-webkit-scrollbar 의사 요소를 지원한다.
다음 예에서는 회색 트랙/바 색상과 짙은 회색(#888) 핸들이 있는 얇은(너비 10px) 스크롤바를 만든다.
1단계) CSS 추가
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
기본 예시
예제 보기
이 예제에서는 상자 그림자가 있는 스크롤바를 만든다.
예제
/* width */
::-webkit-scrollbar {
width: 20px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: red;
border-radius: 10px;
}
기본 예시
예제 보기스크롤바 선택기
웹킷 브라우저의 경우 다음의 가상 요소를 사용하여 브라우저의 스크롤바를 사용자 정의할 수 있다.
스크롤바 사용자 정의
::-webkit-scrollbar
:
스크롤바
::-webkit-scrollbar-button
:
스크롤바에 있는 버튼(위아래를 가리키는 화살표)
::-webkit-scrollbar-thumb
:
드래그 가능한 스크롤 핸들
::-webkit-scrollbar-track
:
스크롤바의 트랙(진행률 막대)
::-webkit-scrollbar-track-piece
:
트랙(진행률 막대)이 핸들로 가려지지 않는다.
::-webkit-scrollbar-corner
:
스크롤바의 하단 모서리, 수평 스크롤바와 수직 스크롤바가 만나는 곳이다.
::-webkit-resizer
:
일부 요소의 아래쪽 모서리에 나타나는 드래그 가능한 크기 조절 핸들이다.
참고
W3C School - Custom Scrollbar
공부 목적 블로그