ChokCoco
·
【现代 CSS】标准滚动条控制规范 scrollbar-color 和 scrollbar-width - ChokCoco
内容提要
Chrome 121 版本开始支持标准的滚动条样式属性 scrollbar-color 和 scrollbar-width。scrollbar-color 用于设置滚动条的轨道和滑块颜色，scrollbar-width 控制滚动条的宽度，支持的值有 auto、thin 和 none。这两个属性相比于非标准的 ::-webkit-scrollbar 有所进步，但功能仍有限。
关键要点
-
Chrome 121 版本开始支持标准的滚动条样式属性 scrollbar-color 和 scrollbar-width。
-
scrollbar-color 用于设置滚动条的轨道和滑块颜色，支持多个颜色设置。
-
scrollbar-width 控制滚动条的宽度，支持的值有 auto、thin 和 none。
-
scrollbar-color 和 scrollbar-width 相比于非标准的 ::-webkit-scrollbar 有所进步，但功能仍有限。
-
scrollbar-width 目前不支持自定义宽度，只能选择三种关键字。
延伸问答
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 上，滚动条轨道是透明的，无法设置颜色，只能设置滚动条滑块的颜色。
