技术资讯：CSS滚动条样式修改，最新方式！

大家好，我是大澈！

本文约800+字，整篇阅读大约需要1分钟。

感谢关注微信公众号：“程序员大澈”，免费领取"面试礼包"一份，然后免费加入问答群，从此让解决问题的你不再孤单！

1. 资讯速览

从 Chrome 版本 2 开始，我们可以使用 ::-webkit-scrollbar-* 伪元素设置滚动条的样式。

于是，便有了以下几种伪元素：

这种方法在 Chrome 和 Safari 中很有效，但 CSS 工作组从未将其标准化。

但从 Chrome 121 开始，系统全面支持标准化的 scrollbar-width 和 scrollbar-color 属性，用来简化滚动条样式的修改。

2. 资讯详细

先详细聊聊 scrollbar-width 和 scrollbar-color 这两个属性，再说说对旧版浏览器的处理和推荐写法，最后做小结。

2.1 两个属性详细

scrollbar-color 可以定义滚动条的颜色，语法如下：

scrollbar-color: auto | 滑杆颜色 轨道颜色;

scrollbar-width 可以设置滚动条的宽度，不过这个宽度不能随意指定，是有约束的，语法如下所示：

scrollbar-width: auto | thin | none;

• auto 就是默认的尺寸，在 Windows 系统下是 17px；

• thin 是窄滚动条，在 Windows 系统下是 8px；

• none 没有滚动条，宽度为0，但是内容依然可以滚动。

2.2 旧版浏览器支持

为了适应不支持 scrollbar-color 和 scrollbar-width 的浏览器旧版本，您可以同时使用新的 scrollbar-* 和 ::-webkit-scrollbar-* 属性。

同时，在 Chrome 121 版本之后，继续使用 ::-webkit-* 伪元素可能会导致样式与预期不符，所以即便是新版本浏览器，也推荐使用如下写法！

/* Modern browsers with `scrollbar-*` support */
@supports (scrollbar-width: auto) {
    .scroller {
        scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track);
        scrollbar-width: var(--scrollbar-width);
    }
}

/* Legacy browsers with `::-webkit-scrollbar-*` support */
@supports selector(::-webkit-scrollbar) {
    .scroller::-webkit-scrollbar-thumb {
        background: var(--scrollbar-color-thumb);
    }
    .scroller::-webkit-scrollbar-track {
        background: var(--scrollbar-color-track);
    }
    .scroller::-webkit-scrollbar {
        max-width: var(--scrollbar-width-legacy);
        max-height: var(--scrollbar-width-legacy);
    }
}

2.3 小结

从 Chrome 121 开始，系统全面支持标准化的 scrollbar-width 和 scrollbar-color 属性，用来简化滚动条样式的修改。

结语

建立这个平台的初衷：

• 打造一个专注于前端功能问题的问答平台，让大家高效搜索处理同样问题。

• 遇到有共鸣的问题，与众多同行朋友们一起讨论，一起沉淀成长。

• 平台现拥有功能问题、技术资讯、实用干货3个专栏内容。

感谢关注微信公众号：“程序员大澈”，免费领取"面试礼包"一份，然后免费加入问答群，从此让解决问题的你不再孤单！