Chrome 在 121 版本开始,原生支持了两个滚动条样式相关的样式 scrollbar-color 和 scrollbar-width。 要知道,在此前,虽然有::-webkit-scrollbar规范可以控制滚动条,可是,::-webkit-scrollbar是非标准特性,在 MDN 文档中都明确了不应该在生产环境使用它。 MDN - ::-webkit-scrollbar Non-standard: This feature...
滚动条伪元素作用的位置::-webkit-scrollbar整个滚动条::-webkit-scrollbar-button滚动条上的按钮 (上下箭头)::-webkit-scrollbar-thumb滚动条上的滚动滑块::-webkit-scrollbar-track滚动条轨道::-webkit-scrollbar-track-piece滚动条没有滑块的轨道部分::-webkit-scrollbar-corner当同时有垂直滚动条和水平滚动条时...
scrollbar-width: thin; scrollbar-width: none; } scrollbar-width: auto:系统默认的滚动条宽度。 scrollbar-width: thin:系统提供的瘦滚动条宽度,或者比默认滚动条宽度更窄的宽度 scrollbar-width: none:不显示滚动条,但是该元素依然可以滚动 简单示意图如下: 完整的 DEMO,你可以戳这里:CodePen Demo -- Scr...
也就是,当前scrollbar-width只接收 3 个关键字: { /* Keyword values */ scrollbar-width: auto; scrollbar-width: thin; scrollbar-width: none; } scrollbar-width: auto:系统默认的滚动条宽度。 scrollbar-width: thin:系统提供的瘦滚动条宽度,或者比默认滚动条宽度更窄的宽度 scrollbar-width: none:不...
::-webkit-scrollbar-thumb 滚动条上的滚动滑块 eg:设置滑块背景色 .box::-webkit-scrollbar-thumb{background-color:blue;} ::-webkit-scrollbar-track 滚动条轨道, 与::-webkit-scrollbar不同的是::-webkit-scrollbar-track设置的是滑块可滑动区域的样式。
以非标准规范::-webkit-scrollbar为例,它将滚动条拆分成了这么多个部分: 当然,新规范没有这么复杂,我们简化上述的图,可以得到这么一张图: 而scrollbar-color能够设置的,正是上图中的 track 和 thumb 的颜色: 轨道(track)是指滚动条,其一般是固定的而不管滚动位置的背景。
::-webkit-scrollbar – 整个滚动条 ::-webkit-scrollbar-track – 滚动条的滚动区域（轨道）::-webkit-scrollbar-thumb – 滚动条的可拖拽部分（滑块）以下是可用但不常用的属性：::-webkit-scrollbar-button – 滚动条两端的上/下（或左/右）按钮 ::-webkit-scrollbar-track-piece – 滚动条轨道未被滑块...
.section::-webkit-scrollbar-thumb{box-shadow:inset006pxrgba(0,0,0,0.3);} 至此,我们已经介绍了CSS中定制滚动条的老方法。让我们探索一下新的语法。 新语法 Scrollbar Width 正如它所说的,这定义了滚动条的宽度,有两个值auto和thin。不好的地方就是,我们不能像webkit的语法那样定义一个具体的数字。
1、::-webkit-scrollbar 定义了滚动条整体的样式; 2、::-webkit-scrollbar-thumb 滑块部分; 3、::-webkit-scrollbar-thumb 轨道部分; 下面以overflow-y:auto;为例(overflow-x:auto同) html代码: css代码: .test{width:50px;height:200px;overflow:auto;float:left...
CSS自定义滚动条样式关键在于使用::-webkit-scrollbar伪元素以及它的相关伪元素子集,如:::-webkit-scrollbar-thumb、::-webkit-scrollbar-track、::-webkit-scrollbar-button等。通过这些伪元素,可以控制滚动条的尺寸、颜色、边框、阴影等属性。其中,::-webkit-scrollbar-thumb控制滑块的样式方面是最常见的自定义点...