CSS 滚动条样式
CSS 滚动条样式模块定义了你可以用于滚动条视觉样式设计的属性。你可以根据需要自定义滚动条的宽度。你还可以自定义滚动条轨道(即滚动条的背景)的颜色,以及滚动条滑块(即滚动条的可拖动手柄)的颜色。
滚动条样式实际应用
此示例定义了一个薄滚动条,带有红色滑块和橙色轨道。要查看滑块,你需要滚动文本。滚动条可见后,将鼠标悬停在其上以查看轨道。
css
.poem {
overflow: scroll;
scrollbar-color: red orange;
scrollbar-width: thin;
}
注意:自定义滚动条时,请确保滑块和轨道与周围背景有足够的对比度。此外,请确保滚动条的点击区域足够大,以方便使用触摸输入的用户。
参考
CSS 属性
相关概念
overflow-blockCSS 属性overflow-inlineCSS 属性overflow-xCSS 属性overflow-yCSS 属性overflowCSS 简写属性overflow-clip-marginCSS 属性scrollbar-gutterCSS 属性scroll-behaviorCSS 属性scroll-marginCSS 简写属性scroll-paddingCSS 简写属性scroll-snap-alignCSS 属性scroll-snap-stopCSS 属性scroll-snap-typeCSS 属性::-webkit-scrollbar伪元素- 滚动容器 术语表
scrollbarARIA 角色
规范
| 规范 |
|---|
| CSS 滚动条样式模块级别 1 |