firefox 不支持 ::-webkit-scrollbar，仅识别 scrollbar-width 和 scrollbar-color；二者须成对使用、作用于 overflow 设置的块级容器，且不支持圆角、阴影等样式。
::-webkit-scrollbar 在 Firefox 中不生效，不是写错了，是它压根不识别这个伪元素——Firefox 用的是 scrollbar-width 和 scrollbar-color 这套标准属性。
Firefox 完全忽略 ::-webkit-scrollbar 系列伪类
Chrome/Safari/Edge 用 WebKit/Blink 内核，支持 ::-webkit-scrollbar、::-webkit-scrollbar-thumb 等一整套伪元素；Firefox（Gecko 引擎）解析器遇到这些规则直接跳过，不报错、不警告、不渲染。哪怕你写了完整的五层伪类，Firefox 也当它们不存在。
常见错误现象：
- 只写
::-webkit-scrollbar就去 Firefox 测试，滚动条毫无变化 - 在
@supports里混写::-webkit-scrollbar和scrollbar-width，导致整条规则被 Firefox 当作无效语法丢弃 - 把
scrollbar-color写在子容器上（如.list::-webkit-scrollbar同级位置），但 Firefox 要求它必须作用于可滚动的块级容器本身
scrollbar-width 和 scrollbar-color 的硬性约束
这两个属性是 Firefox 唯一认可的滚动条控制方式，但能力有限，且有明确使用边界：
-
scrollbar-width只接受三个值：auto（默认）、thin（紧凑）、none（视觉隐藏）；写成scrollbar-width: 8px或scrollbar-width: small会直接失效 -
scrollbar-color必须同时提供两个颜色：scrollbar-color: #6c63ff #f5f5f5，顺序不能反，第一个是滑块色，第二个是轨道色；单写一个颜色或用rgba(0,0,0,0.3)会被忽略 - 二者都只对设置了
overflow: auto或overflow: scroll的块级元素生效；inline元素、flex子项、或没显式设height/max-height的容器上写无效 - 不支持
border-radius、box-shadow、transition，也不能单独选中轨道或滑块做 hover 效果
如何安全地同时适配 Chrome 和 Firefox
不能靠一套规则“蒙混过关”，必须用特性检测隔离两套逻辑：
- 给 WebKit 浏览器写：
@supports (selector(::-webkit-scrollbar)) { .scroll-area::-webkit-scrollbar { width: 8px; } .scroll-area::-webkit-scrollbar-track { background: #f5f5f5; } .scroll-area::-webkit-scrollbar-thumb { background: #6c63ff; border-radius: 4px; } } - 给 Firefox（及新版 Edge/Chrome 的部分模式）写：
@supports (scrollbar-width: auto) { .scroll-area { scrollbar-width: thin; scrollbar-color: #6c63ff #f5f5f5; } } - 避免把两套规则塞进同一个选择器块里，否则 Firefox 会因不识别
::-webkit-scrollbar而跳过整条 CSS 声明，连带后面的scrollbar-width也不执行 - 如果用 Tailwind，需启用
tailwind-scrollbar插件的nocompatible: true模式，并确保同时使用scrollbar-thumb-和scrollbar-track-类，否则scrollbar-color不会生成
移动端和特殊系统下的现实限制
iOS Safari（包括微信、钉钉 WebView）完全无视所有 ::-webkit-scrollbar 规则；Android Chrome 从 v80 起也逐步废弃对 ::-webkit-scrollbar-thumb 的支持。这意味着：哪怕你在桌面端 Chrome 和 Firefox 都调通了，放到手机上大概率还是原生滚动条。
更隐蔽的问题：
- macOS 系统偏好里开启“仅在滚动时显示滚动条”，会导致自定义样式不可见——调试时可临时加
overflow: scroll强制显示 - 某些 Linux GTK 主题或 Windows 高 DPI 缩放 ≥125% 时，
scrollbar-width: thin可能被 UA 强制回退为auto - 父元素用了
transform或will-change，可能让::-webkit-scrollbar-thumb拖动卡顿甚至消失，Firefox 虽不受此影响，但跨浏览器一致性就崩了
真正麻烦的不是写不对，而是忘了 Firefox 的 scrollbar-color 必须成对出现、必须写在正确容器上、且无法微调圆角或阴影——这些限制在开发初期容易被忽略，等上线后才发现 PC 端 Firefox 用户看到的还是粗笨的原生滚动条。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
