【现代 CSS】标准滚动条控制规范 scrollbar-color 和 scrollbar-widt...

奇舞精选 · 公众号 · 科技自媒体互联网安全 · 2024-05-27 18:43

主要观点总结

本文主要介绍了CSS滚动条样式的两个新属性scrollbar-color和scrollbar-width的使用。这两个属性在Chrome 121版本开始原生支持，用于控制滚动条的样式。scrollbar-color用于设置滚动条的颜色，包括轨道和滑块的颜色；而scrollbar-width则用于设置滚动条的宽度，但目前只接受关键字值auto、thin和none。

关键观点总结

关键观点1: scrollbar-color属性介绍及用法

该属性用于设置滚动条的颜色，包括轨道和滑块的颜色。可以设置两个颜色值，第一个应用于滑块，第二个应用于轨道。在Windows操作系统下，滚动条的表现效果是在容器内容溢出开始滚动时出现的。而在macOS/iOS操作系统下，滚动条在默认情况下不会显示，只有在Hover状态或滚动状态下才会显示。值得注意的是，macOS/iOS系统下的滚动条轨道是透明的，只能设置滑块的颜色。

关键观点2: scrollbar-width属性介绍及用法

该属性用于设置滚动条的宽度。然而，在一期滚动条规范中，其功能较弱，目前不支持接受具体的宽度数值，只能接受关键字值auto、thin和none。其中，scrollbar-width: auto表示系统默认的滚动条宽度，thin表示系统提供的瘦滚动条宽度或更窄的宽度，none则表示不显示滚动条但元素仍可滚动。

关键观点3: 非标准滚动条规范与标准滚动条规范的对比

早期使用::-webkit-scrollbar规范来控制滚动条是非标准的，不建议在生产环境中使用。而scrollbar-color和scrollbar-width是官方标准，在CSS Scrollbars Styling Module Level 1规范中被提出，提供了更广泛和可定制的控制滚动条的选项。