CSS Scrollbars

CSS Scrollbars 标准化了由 ie5 引入的废弃的滚动条颜色属性

示例

在这个例子里 我们选择使用一个比较细的 滚动轨道为绿色,滚动块为紫色的滚动条

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

浏览器兼容性

css.properties.scrollbar-color

BCD tables only load in the browser

css.properties.scrollbar-width

BCD tables only load in the browser