방법 - 사용자 지정 스크롤바
CSS로 사용자 정의 스크롤바를 만드는 방법을 알아보세요.
사용자 정의 스크롤바
참고: 사용자 정의 스크롤 막대는 Firefox 또는 Edge, 이전 버전 79에서 지원되지 않습니다.
사용자 지정 스크롤 막대를 만드는 방법
Chrome, Edge, Safari 및 Opera는 비표준 ::-webkit-scrollbar
의사 요소를 지원하므로 브라우저 스크롤바의 모양을 수정할 수 있습니다.
다음 예제에서는 회색 트랙/바 색상과 짙은 회색(#888) 핸들이 있는 얇은(10px 너비) 스크롤 막대를 만듭니다.
예시
/* 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
일부 요소의 하단 모서리에 나타나는 드래그 가능한 크기 조정 핸들입니다.