firefox不解析::-webkit-scrollbar是内核设计差异，非bug；其仅支持scrollbar-width（auto/thin/none）和scrollbar-color（滑块色+轨道色，顺序不可反），二者须同规则块共存且用@supports隔离，混写会导致整条规则失效。
Firefox根本不解析::-webkit-scrollbar
这不是 Bug，是内核设计差异。Firefox 使用 Gecko 引擎，完全忽略所有 ::-webkit-scrollbar 及其变体（如 ::-webkit-scrollbar-thumb），连语法错误都不会报——它直接跳过整条规则。你写的样式在 Firefox 开发者工具里根本不会出现在 Computed 面板中，不是被覆盖，是压根没加载。
scrollbar-width 和 scrollbar-color 必须共存且同选择器
Firefox 唯一支持的滚动条控制方式就是这两个属性，但它们有强耦合约束：
-
scrollbar-width只接受auto、thin、none三个字面值，不能写6px或var(--size) -
scrollbar-color必须严格按顺序写成scrollbar-color: #6c757d #f8f9fa—— 第一个是滑块色，第二个是轨道色；漏一个或顺序反了，整行失效 - 必须写在同一 CSS 规则块里，例如
.modal-body { scrollbar-width: thin; scrollbar-color: #6c757d #f8f9fa; }；如果拆成两条独立声明，后一条会被忽略
混写 WebKit 和 Firefox 规则会导致全失效
很多人把两套规则塞进同一个选择器，比如：
.modal-body {
scrollbar-width: thin;
scrollbar-color: #6c757d #f8f9fa;
::-webkit-scrollbar { width: 8px; }
}
这种写法在 Firefox 中会因不认识 ::-webkit-scrollbar 而跳过整个规则块，连带 scrollbar-width 也失效。正确做法是用 @supports 隔离：
- Firefox 专属规则用
@supports (scrollbar-width: thin)包裹 - WebKit 专属规则用
@supports selector(::-webkit-scrollbar)包裹（注意 Safari 16.4+ 才稳定支持该检测）
容易被忽略的兼容细节
即使写对了，以下几点仍常导致“看起来没生效”：
-
scrollbar-width: thin在 macOS 上受系统设置影响——若用户开启了“仅当滚动时显示”，那它就真只在滚动瞬间出现，静止时不可见 - Firefox 不支持圆角、hover、阴影、渐变等任何修饰，
border-radius和box-shadow写了等于白写 - 移动端 Safari 对
scrollbar-color支持极弱，iOS 16+ 才开始识别滑块颜色，且不支持轨道色 - 如果你在本地用
file://或 HTTP 协议调试，Chrome 120+ 会静默禁用自定义滚动条，但 Firefox 不受影响——这会让跨浏览器对比更迷惑
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
