CSS Scrollbars

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

CSS Scrollbars는 Windows IE 5.5에서 2000년에 도입한 더이상 사용되지 않는(obsolete) 스크롤바 색상 프로퍼티를 표준화합니다.

기본 예제

이 예제에서 우리는 녹색 트랙과 보라색 썸(thumb)을 가진 얇은 스크롤바를 사용하기로 선택했습니다.

.scroller {
  width: 300px;
  height: 100px;
  overflow-y: scroll;
  scrollbar-color: rebeccapurple green;
  scrollbar-width: thin;
}

HTML

<div class="scroller">
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi
welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
Dandelion cucumber earthnut pea peanut soko zucchini.
</div>

결과

참고

CSS 속성

명세

Specification
CSS Scrollbars Styling Module Level 1
# scrollbar-width
CSS Scrollbars Styling Module Level 1
# scrollbar-color
CSS Scrollbars Styling Module Level 1

접근성 고려사항

스크롤바를 커스터마이징 할 때, 스크롤바에 충분한 대비가 있고 터치 입력을 사용하는 사람들에게도 충분히 히트 영역(hit area)이 큰지 고려하십시오.

브라우저 호환성

scrollbar-width

BCD tables only load in the browser

scrollbar-color

BCD tables only load in the browser

같이 보기