Firefox 不支持 ::-webkit-scrollbar，仅识别 scrollbar-width 和 scrollbar-color，且必须用 @supports (scrollbar-width: thin) 隔离，否则整条规则被静默忽略。
Firefox 中写 ::-webkit-scrollbar 根本不会生效——这不是代码错误，是浏览器压根不解析这个伪元素。它只认 scrollbar-width 和 scrollbar-color，且必须用 @supports 隔离，否则整条规则会被跳过。
为什么 ::-webkit-scrollbar 在 Firefox 里完全没反应
Firefox 使用 Gecko 引擎，而 ::-webkit-scrollbar 是 WebKit/Blink 专属语法。它不会报错、不发警告，只是静默忽略整条 CSS 规则——哪怕你把它和 scrollbar-width 写在同一块里，后者也会跟着失效。
- 检查 DevTools 的 Styles 面板：如果看到整条规则被划掉（灰色），大概率是语法不识别导致的跳过
- 别在
body或普通div上直接写scrollbar-width，它必须作用于**滚动容器本身**（比如html、带overflow: auto的div） -
scrollbar-width: thin不是像素级控制，只是“尽可能窄”，不同版本 Firefox 渲染宽度可能略有差异
怎样正确声明 Firefox 专属滚动条样式
必须用 @supports (scrollbar-width: thin) 包裹，且只放 Firefox 支持的两个属性：
-
scrollbar-width只接受auto/thin/none，不能写8px或rem -
scrollbar-color顺序固定为scrollbar-color: <thumb><track></track></thumb>，反了就无效 - 不支持
border-radius、box-shadow、:hover，写了也白写 - 示例：
html {@supports (scrollbar-width: thin) {scrollbar-width: thin;scrollbar-color: #666 #f0f0f0;}}
混写 WebKit 和 Firefox 样式时最常踩的坑
同一 CSS 块里同时写 ::-webkit-scrollbar 和 scrollbar-width，Firefox 会因不认识前者而丢弃整条规则——连带后面的 scrollbar-width 也失效。
立即学习“前端免费学习笔记（深入）”；
- WebKit 样式必须单独放进
@supports selector(::-webkit-scrollbar)块（注意：Safari 16.4+ 才稳定支持该检测） - Firefox 样式必须独占
@supports (scrollbar-width: thin)块，里面不能出现任何 WebKit 伪类 - 别指望
scrollbar-color在 iOS Safari 或旧版 Edge 中生效，它只在较新 Firefox 和部分 Chromium 中被部分实现 - 移动端 Chrome（所有 Android 版本）完全不支持
::-webkit-scrollbar，不是兼容性问题，是功能缺失
Chrome 120+ 下本地开发时样式突然消失
Chrome 120+ 默认禁用非安全上下文下的自定义滚动条。file:// 协议、HTTP 页面、甚至未配 HTTPS 的 http://dev.example.com 全部被拦截——样式静默丢弃，控制台无提示。
- 开发阶段必须走
localhost:3000或https://，否则::-webkit-scrollbar和scrollbar-color都不会渲染 - 父容器若设了
overflow: hidden或transform，会创建新层叠上下文，导致滚动条被裁剪或不可见 -
scrollbar-gutter: stable必须写在html上才有效，写在body或div上直接被忽略
真正麻烦的不是写法，而是每个浏览器都在用完全不同的机制控制滚动条：WebKit 系靠伪元素、Firefox 靠两个原生属性、iOS Safari 基本放弃、Android Chrome 直接不实现。所谓“统一方案”，本质是分层降级 + 严格隔离，漏掉任一环，就会在某个环境里彻底失效。
