chrome和firefox滚动条机制本质不同，::-webkit-scrollbar仅webkit/blink引擎支持，firefox（gecko）完全忽略；firefox仅支持scrollbar-width和scrollbar-color，须用@supports隔离兼容性。
没有“修复”一说，只有分层适配——Chrome 和 Firefox 的滚动条控制机制本质不同，强行统一只会导致部分浏览器完全失效或样式被静默跳过。
为什么 ::-webkit-scrollbar 在 Firefox 里完全没反应
这不是 bug，是内核设计决定的：::-webkit-scrollbar 是 WebKit/Blink 专属伪元素，Firefox（Gecko）根本不解析它。写了也不会报错、不警告，整条 CSS 规则直接被忽略。
-
::-webkit-scrollbar只在 Chrome、Edge（96+）、Safari（16.4+ 稳定）中生效 - Firefox 完全无视该伪类，哪怕你把它和
scrollbar-width写在同一规则块里，也会连带让后者失效 - 必须用
@supports selector(::-webkit-scrollbar)隔离 WebKit 样式，否则 Firefox 会因语法错误跳过整条规则
Firefox 能用什么控制滚动条
Firefox 只支持两个标准属性，且功能极简：
-
scrollbar-width：仅接受auto/thin/none，不能设像素值 -
scrollbar-color：仅控制 thumb 和 track 的颜色，顺序固定为scrollbar-color: <thumb><track></track></thumb>，不能设圆角、阴影、hover 效果 - 必须用
@supports (scrollbar-width: thin)包裹，否则旧版 Firefox（ - 别指望
scrollbar-color在 iOS Safari 或旧 Edge 中生效——它只在 Firefox 和少数新版 Chromium 中被部分实现
Chrome 120+ 下 ::-webkit-scrollbar 突然失效的真正原因
本地开发最常踩的坑：Chrome 120+ 默认禁用非安全上下文下的自定义滚动条。不是代码错了，是协议/域名不被信任。
- file:// 协议、HTTP 页面、甚至
http://dev.example.com全部被拦截，样式静默丢弃，控制台无提示 - 唯一合法环境：HTTPS 或
localhost（含端口，如localhost:3000） -
::-webkit-scrollbar不支持var(--color)、calc()或任何动态值，所有宽高、颜色必须写死 - 父容器若设了
overflow: hidden或transform，会创建新层叠上下文，滚动条可能被裁剪或不可见
如何安全共存 WebKit 与 Firefox 滚动条声明
关键不是“怎么写”，而是“怎么隔离”。混写 = 全失效。
- Firefox 声明必须独占一个
@supports (scrollbar-width: thin)块，里面只放scrollbar-width和scrollbar-color - WebKit 声明必须放在
@supports selector(::-webkit-scrollbar)块里（注意 Safari 16.4+ 才稳定支持该检测） -
::-webkit-scrollbar-thumb中禁用box-shadow、filter、background-image——这些会触发高频重绘，滚动卡顿 - iOS Safari 对
::-webkit-scrollbar-thumb:hover支持极差，建议直接省略 hover 状态
滚动条样式从来不是“开箱即用”的功能，它是浏览器厂商博弈后留下的残缺接口。真要强一致体验，JS 滚动库仍是唯一解，但代价是性能、体积和事件链路复杂度——多数项目值得做的，只是在 thin + scrollbar-color 保底基础上，给 Chrome 加一层可控的 ::-webkit-scrollbar。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
