목차
- ::-webkit-scrollbar 예제 - 유튜브 스크롤바
- ::-webkit-scrollbar 정의
- 스크롤바 커스텀 관련 JS 라이브러리 모음
※ 비표준 속성
::-webkit-scrollbar 예제 - 유튜브 스크롤바
<style>
.container {
max-height: 200px;
width: 60%;
overflow: auto;
}
.container::-webkit-scrollbar {
width: 10px;
}
.container::-webkit-scrollbar-track {
background: transparent;
}
.container::-webkit-scrollbar-thumb {
background: transparent;
}
.content {
height: 800px;
}
.container-dark {
background: black;
color:white;
}
.container-dark:hover::-webkit-scrollbar-thumb {
background: red;
}
.container-light {
background: white;
}
.container-light:hover::-webkit-scrollbar-thumb {
background: blue;
}
</style>
<div class="container container-dark">
<div class="content">Homzzang.com (다크모드)</div>
</div>
<div class="container container-light">
<div class="content">Homzzang.com (화이트모드)</div>
</div>
결과보기
::-webkit-scrollbar 정의
스크롤바 관련 선택자.
1.
스크롤바 관련 선택자
- ::-webkit-scrollbar - 스크롤바 전체
- ::-webkit-scrollbar-button - 스크롤바의 버튼 (= 위/아래 표시 화살표)
- ::-webkit-scrollbar-thumb - 드래그 가능한 스크롤 핸들 막대
- ::-webkit-scrollbar-track - 스크롤바 트랙(진행률 표시줄)
- ::-webkit-scrollbar-track-piece - 핸들로 덮이지 않은 트랙(진행률 표시줄).
- ::-webkit-scrollbar-corner - 수평/수직 스크롤 막대가 만나는 스크롤 막대의 하단 모서리
- ::-webkit-resizer - 일부 요소의 하단 모서리에 나타나는 드래그 가능한 크기 조정 핸들.
2.
IE와 파이어폭스 제외한 주요 최신 브라우저 모두 지원.
3. MDN ::-webkit-scrollbar 예제보기
https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar
PS.
스크롤바 너비가 너무 좁으면 사용자가 불편 호소하니 주의 !!
스크롤바 커스텀 관련 JS 라이브러리 모음
