CSS 滚动条样式

CSS 滚动条样式模块定义了你可以用于滚动条视觉样式设计的属性。你可以根据需要自定义滚动条的宽度。你还可以自定义滚动条轨道(即滚动条的背景)的颜色,以及滚动条滑块(即滚动条的可拖动手柄)的颜色。

滚动条样式实际应用

此示例定义了一个薄滚动条,带有红色滑块和橙色轨道。要查看滑块,你需要滚动文本。滚动条可见后,将鼠标悬停在其上以查看轨道。

css
.poem {
  overflow: scroll;
  scrollbar-color: red orange;
  scrollbar-width: thin;
}

注意:自定义滚动条时,请确保滑块和轨道与周围背景有足够的对比度。此外,请确保滚动条的点击区域足够大,以方便使用触摸输入的用户。

参考

CSS 属性

规范

规范
CSS 滚动条样式模块级别 1

另见