Chrome 在 121 版本开始,原生支持了两个滚动条样式相关的样式 scrollbar-color 和 scrollbar-width。 要知道,在此前,虽然有::-webkit-scrollbar规范可以控制滚动条,可是,::-webkit-scrollbar是非标准特性,在 MDN 文档中都明确了不应该在生产环境使用它。 MDN - ::-webkit-scrollbar Non-standard: This feature...
Chrome 在 121 版本开始,原生支持了两个滚动条样式相关的样式 scrollbar-color 和 scrollbar-width。 要知道,在此前,虽然有::-webkit-scrollbar规范可以控制滚动条,可是,::-webkit-scrollbar是非标准特性,在 MDN 文档中都明确了不应该在生产环境使用它。 MDN - ::-webkit-scrollbar Non-standard: This feature...
scrollbar-width: none; } scrollbar-width: auto:系统默认的滚动条宽度。 scrollbar-width: thin:系统提供的瘦滚动条宽度,或者比默认滚动条宽度更窄的宽度 scrollbar-width: none:不显示滚动条,但是该元素依然可以滚动 简单示意图如下: 完整的 DEMO,你可以戳这里:CodePen Demo -- Scrollbar-width Demo 总结一...
滚动条伪元素作用的位置::-webkit-scrollbar整个滚动条::-webkit-scrollbar-button滚动条上的按钮 (上下箭头)::-webkit-scrollbar-thumb滚动条上的滚动滑块::-webkit-scrollbar-track滚动条轨道::-webkit-scrollbar-track-piece滚动条没有滑块的轨道部分::-webkit-scrollbar-corner当同时有垂直滚动条和水平滚动条时...
以非标准规范::-webkit-scrollbar为例,它将滚动条拆分成了这么多个部分: 当然,新规范没有这么复杂,我们简化上述的图,可以得到这么一张图: 而scrollbar-color能够设置的,正是上图中的 track 和 thumb 的颜色: 轨道(track)是指滚动条,其一般是固定的而不管滚动位置的背景。
::-webkit-scrollbar-thumb 滚动条上的滚动滑块 eg:设置滑块背景色 .box::-webkit-scrollbar-thumb{background-color:blue;} ::-webkit-scrollbar-track 滚动条轨道, 与::-webkit-scrollbar不同的是::-webkit-scrollbar-track设置的是滑块可滑动区域的样式。
在这里,我们可以看到scrollbar-track-color设置为#91d4c9,滚动条的宽度为8px。 scrollbar-thumb-color 与scrollbar-track-color类似,该属性明确设置滚动条滑块的颜色,而无需定义轨道颜色。 /* Setting scrollbar thumb color explicitly */ ::-webkit-scrollbar-thumb{ ...
.section::-webkit-scrollbar-thumb{box-shadow:inset006pxrgba(0,0,0,0.3);} 至此,我们已经介绍了CSS中定制滚动条的老方法。让我们探索一下新的语法。 新语法 Scrollbar Width 正如它所说的,这定义了滚动条的宽度,有两个值auto和thin。不好的地方就是,我们不能像webkit的语法那样定义一个具体的数字。
::-webkit-scrollbar – 整个滚动条 ::-webkit-scrollbar-track – 滚动条的滚动区域（轨道）::-webkit-scrollbar-thumb – 滚动条的可拖拽部分（滑块）以下是可用但不常用的属性：::-webkit-scrollbar-button – 滚动条两端的上/下（或左/右）按钮 ::-webkit-scrollbar-track-piece – 滚动条轨道未被滑块...
.section::-webkit-scrollbar-track { background-color: darkgrey; } 1. 2. 3. 滚动条 thumb 准备好了滚动条的基础后,我们就需要对滚动条的thumb进行样式设计。这很重要,因为用户可能会拖动这个thumb与滚动条进行交互。