CSS Scrollbars

실험적: 이 기능은 실험적인 기능입니다.
프로덕션 환경에서 사용하기 전에 브라우저 호환성 표를 주의 깊게 확인하세요.

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

기본 예제

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

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

HTML

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

접근성 고려사항

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

브라우저 호환성

css.properties.scrollbar-color

BCD tables only load in the browser

css.properties.scrollbar-width

BCD tables only load in the browser

같이 보기