【现代 CSS】标准滚动条控制规范 scrollbar-color 和 scrollbar-width - ChokCoco
内容提要
Chrome 121 版本开始支持标准的滚动条样式属性 scrollbar-color 和 scrollbar-width。scrollbar-color 用于设置滚动条的轨道和滑块颜色，scrollbar-width 控制滚动条的宽度，支持的值有 auto、thin 和 none。这两个属性相比于非标准的 ::-webkit-scrollbar 有所进步，但功能仍有限。
延伸解读
标准属性与 ::-webkit-scrollbar 的差异
文章指出，scrollbar-color 和 scrollbar-width 是 CSS Scrollbars Styling Module Level 1 规范中的标准属性，而 ::-webkit-scrollbar 是非标准特性，MDN 明确不建议在生产环境使用。标准属性在跨浏览器兼容性和未来稳定性上更有保障，但功能相对有限，例如 scrollbar-width 仅支持 auto、thin、none 三个关键字，无法自定义具体宽度。
跨平台表现差异需注意
在 macOS/iOS 系统下，滚动条默认不显示，仅在悬停或滚动时出现，且轨道透明无法设置颜色，只能设置滑块颜色。而 Windows 下轨道颜色可被设置。因此，使用 scrollbar-color 时需考虑不同平台的渲染差异，避免设计效果与预期不符。
文档滞后与关键字支持现状
中文 MDN 文档（截至 2024-04-06）提到 scrollbar-color 支持 light 和 dark 关键字，但作者实测发现目前没有任何浏览器支持这些关键字。这提醒开发者应优先查阅英文文档，并以实际浏览器测试为准，避免依赖未实现的功能。
Q&A
Chrome 121 版本新增了哪些滚动条样式属性？
Chrome 121 版本新增了 scrollbar-color 和 scrollbar-width 两个滚动条样式属性。
scrollbar-color 属性的作用是什么？
scrollbar-color 属性用于设置滚动条的轨道和滑块的颜色。
scrollbar-width 属性支持哪些值？
scrollbar-width 属性支持 auto、thin 和 none 三个值。
与非标准的 ::-webkit-scrollbar 相比，scrollbar-color 和 scrollbar-width 有何进步？
scrollbar-color 和 scrollbar-width 是官方标准，相比于非标准的 ::-webkit-scrollbar，它们的使用更为规范，但功能仍有限。
scrollbar-width 属性是否支持自定义宽度？
scrollbar-width 属性不支持自定义宽度，只能选择三种关键字。
在 macOS/iOS 上，scrollbar-color 的表现如何？
在 macOS/iOS 上，滚动条轨道是透明的，无法设置颜色，只能设置滚动条滑块的颜色。
