만드는 방법: 사용자 정의 스크롤 바

CSS를 사용하여 사용자 정의 스크롤 바를 만들어보는 방법을 배웁니다.

사용자 정의 스크롤 바를 생성하는 방법

Chrome, Edge, Safari, Opera는 비표준 ::webkit-scrollbar 파생 요소, 이는 브라우저 스크롤 바의 외관을 수정할 수 있음을 허용합니다.

다음 예제는 너비가 10px인 스크롤 바를 생성하며, 그 스크롤 바는 회색 트랙/줄색과 짙은 회색(#888) 슬라이더를 가집니다:

/* 너비 */
::webkit-scrollbar {
  width: 10px;
}
/* 트랙 */
::webkit-scrollbar-track {
  background: #f1f1f1;
}
/* 슬라이더 */
::webkit-scrollbar-thumb {
  background: #888;
}
/* 마우스 오버 시 슬라이더 */
::webkit-scrollbar-thumb:hover {
  background: #555;
}

직접 테스트해 보세요

이 예제는 그림자 효과가 있는 스크롤 바를 생성합니다:

예제

/* 너비 */
::webkit-scrollbar {
  width: 20px;
}
/* 트랙 */
::webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 10px;
}
/* 슬라이더 */
::webkit-scrollbar-thumb {
  background: red;
  border-radius: 10px;
}

직접 테스트해 보세요

스크롤 바 선택자

webkit 브라우저에서는 다음 패션 요소를 사용하여 브라우저의 스크롤 바를 커스터마이즈할 수 있습니다: