Firefox 不支持 ::-webkit-scrollbar，必须显式声明 scrollbar-width 和 scrollbar-color；scrollbar-color 需两个颜色值，仅写一个会被忽略。
只写 ::-webkit-scrollbar 是不够的，Firefox 会完全忽略，回退到丑陋的系统默认样式；必须同时处理 WebKit 和 Firefox 两套机制，且不能指望 autoprefixer 或 PostCSS 自动补全——它们不处理滚动条伪元素。
Firefox 的 scrollbar-width 和 scrollbar-color 必须显式声明
Firefox 自 64 版起支持 scrollbar-width（auto / thin / none）和 scrollbar-color（thumb-color track-color），这是它唯一接受的滚动条控制方式。不写这两条，哪怕 WebKit 部分再完整，Firefox 里滚动条依然粗、灰、无圆角、不可 hover 变色。
常见错误现象：
- 开发时在 Chrome 看着完美，上线后用户反馈“滚动条太粗”“颜色没变”——大概率是只写了 WebKit 规则
-
scrollbar-color写成单色（如#888）会被 Firefox 忽略，必须是两个颜色值 -
scrollbar-width: thin在某些旧版 Firefox（auto 或用 JS 检测
实操建议：
- 把
scrollbar-width和scrollbar-color放在选择器顶层，和overflow同级声明 - 避免用变量拼接
scrollbar-color值，Sass 不会解析空格分隔的双色值，直接写死更稳：scrollbar-color: #666 #f5f5f5 - 若需隐藏滚动条但保留滚动能力，
scrollbar-width: none比overflow: -moz-hidden-unscrollable更可靠
::-webkit-scrollbar 伪元素必须成套出现，且作用域要精准
WebKit 浏览器（Chrome、Edge、Safari）依赖一整套伪元素：除了 ::-webkit-scrollbar，::-webkit-scrollbar-thumb 和 ::-webkit-scrollbar-track 至少得有，否则滚动条可能消失或样式错乱。
使用场景：
- 全局统一：写在
html或body上，影响所有可滚动容器（慎用，容易误伤第三方组件） - 局部定制：绑定到具体类名（如
.chat-list），配合@include scroll-bar()调用 - 禁用 hover 效果：有些 UI 库（如 Ant Design）自带滚动条 hover 变色，若冲突，加
!important或提高选择器权重
参数差异：
-
width和height值必须带单位（8px），不能只写数字 -
border-radius推荐设为999px而非50%，后者在窄轨道上易失效 -
-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.2)比纯背景色更显立体，但增加渲染开销
Sass @mixin 封装时，别把浏览器逻辑混进参数里
一个典型的错误是设计成 @mixin scroll-bar($webkit: true, $firefox: true)，看似灵活，实际导致编译出大量冗余 CSS，且无法按需关闭某套规则。
正确做法是分离关注点：
- 用独立的
@mixin scroll-bar-webkit()和@mixin scroll-bar-firefox()，各自负责对应逻辑 - 主
@mixin scroll-bar()内部按需调用二者，不暴露底层开关 - 颜色、尺寸等可配置项用参数传入，但浏览器判断逻辑由 mixin 自己决定（例如通过
$support-firefox变量控制） - 避免在 mixin 中写
@supports (scrollbar-color: auto)，Sass 编译期无法运行运行时检测
示例片段：
@mixin scroll-bar-firefox {
scrollbar-width: thin;
scrollbar-color: #777 #f9f9f9;
}
@mixin scroll-bar-webkit {
&::-webkit-scrollbar {
width: 8px;
height: 8px;
}
&::-webkit-scrollbar-thumb {
background-color: #777;
border-radius: 999px;
}
&::-webkit-scrollbar-track {
background-color: #f9f9f9;
}
}
@mixin scroll-bar {
@include scroll-bar-firefox;
@include scroll-bar-webkit;
}
真正麻烦的是滚动条交互状态：Firefox 不支持 ::-webkit-scrollbar-thumb:hover 这类伪类，而 WebKit 也不认 scrollbar-thumb:hover。hover 效果只能靠 JS 模拟，或者干脆放弃——这点很容易被忽略，直到 QA 提 Bug 才发现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
