Firefox和WebKit浏览器滚动条样式不一致的根本原因是内核API不同：Firefox仅支持scrollbar-width和scrollbar-color（作用于html或带overflow的元素），WebKit则依赖::-webkit-scrollbar伪元素系列（须绑定具体容器），两者语法、能力、生效范围均不兼容，无法统一书写，只能分别适配。
Firefox 和 WebKit 浏览器滚动条样式不一致的根本原因
不是写法错了，是浏览器内核根本不提供同一套 API：WebKit（Chrome/Safari/Edge）用 ::-webkit-scrollbar 伪元素做精细化控制；Firefox 则只认 scrollbar-width 和 scrollbar-color 这两个声明式属性。两者语法、能力、甚至生效范围都不同——强行只写一套 CSS 必然漏掉至少一个阵营。
如何让 scrollbar-color 和 ::-webkit-scrollbar 同时生效且不冲突
关键在于「作用域分离」和「优先级控制」：
-
scrollbar-color和scrollbar-width只能作用于根元素（html）或设置了overflow的块级元素，但不能加类选择器前缀（比如.box { scrollbar-color: … }无效） -
::-webkit-scrollbar系列必须绑定到具体容器（如.custom-scroll::-webkit-scrollbar），否则会污染全局滚动条 - 两者可以共存，但需注意：Firefox 完全忽略
::-webkit-scrollbar规则，WebKit 浏览器也完全忽略scrollbar-color—— 所以不是“覆盖”，而是“各自负责”
推荐写法：
/* Firefox 全局或容器级生效（仅限 html 或带 overflow 的元素） */
.custom-scroll {
scrollbar-width: thin;
scrollbar-color: #888 #f1f1f1;
}
<p>/<em> WebKit 专属，必须绑定到目标元素 </em>/
.custom-scroll::-webkit-scrollbar {
width: 10px;
}
.custom-scroll::-webkit-scrollbar-track {
background: #f1f1f1;
}
.custom-scroll::-webkit-scrollbar-thumb {
background: #888;
border-radius: 5px;
}
.custom-scroll::-webkit-scrollbar-thumb:hover {
background: #555;
}
为什么给 body 或 html 加自定义滚动条经常失效
常见失败场景有三个：
立即学习“前端免费学习笔记（深入）”；
- 在
body上设scrollbar-color：Firefox 不支持该选择器，必须写在html上 - 在
html上用了overflow: hidden或height: 100%类样式，导致实际滚动发生在body，而scrollbar-color又没作用到body（Firefox 不认） - 同时开了
overscroll-behavior: contain或使用了第三方滚动库（如simplebar），它们会接管滚动容器，使原生滚动条消失，CSS 样式自然无效
什么时候必须放弃纯 CSS，改用 JS 滚动条库
当出现以下任一情况，CSS 方案就不可靠了：
- 需要统一
body滚动条样式（Firefox 对html外的滚动容器不支持scrollbar-color） - 项目要求滚动条始终显示（
autoHide: false），而scrollbar-width: auto在 Firefox 中无法强制显示 - 容器存在嵌套滚动（如弹窗内还有可滚动列表），WebKit 伪元素难以精准控制层级，且 Firefox 完全无法干预子容器滚动条
- 需要 SSR 支持或服务端渲染时动态切换主题（
::-webkit-scrollbar是客户端 CSS，服务端不解析）
这时直接上 OverlayScrollbars 或 simplebar 更省心——它们在 DOM 层模拟滚动条，绕开浏览器差异，但代价是增加约 14–18KB 的 JS 体积和额外的初始化逻辑。
