Firefox和WebKit滚动条样式必须分开编写：Firefox仅支持scrollbar-width和scrollbar-color，WebKit仅支持::-webkit-scrollbar伪元素；两者语法不兼容，无法fallback，需分别定义且不可混用。
Firefox 和 WebKit 滚动条样式必须分开写
Firefox 只认 scrollbar-width 和 scrollbar-color，完全不支持 ::-webkit-scrollbar 伪元素；WebKit（Chrome/Safari/Edge）则只响应 ::-webkit-scrollbar 系列伪类。两者语法不重叠、无法 fallback，硬写在一起只会让一方失效。
常见错误是把 Firefox 属性塞进 &::-webkit-scrollbar 块里，或者用 @supports 包裹整个滚动条规则——但 @supports (scrollbar-width: thin) 在 Safari 下直接被忽略，而 @supports selector(::-webkit-scrollbar) 又不被 Firefox 支持，检测不可靠。
- Firefox 方案只需两行：
scrollbar-width: thin;（或auto/none），scrollbar-color: #888 #eee;（thumb track 颜色） - WebKit 方案必须用伪元素：至少定义
::-webkit-scrollbar（宽高）、::-webkit-scrollbar-track（轨道）、::-webkit-scrollbar-thumb（滑块） - 不要给
::-webkit-scrollbar-thumb设opacity或透明背景——旧版 Safari 会渲染异常，用rgba(0,0,0,0.2)代替hsla()更稳
@mixin scrollbar 必须显式分离浏览器逻辑
不能只封装一套参数然后“自动适配”，因为 Firefox 和 WebKit 的属性名、取值范围、生效条件完全不同。一个 mixin 要同时输出两套互斥规则，且不能依赖构建时的 Autoprefixer 补前缀——它对 scrollbar-width 和 ::-webkit-scrollbar 完全无感。
推荐写法是用参数控制视觉变量，但内部强制分发到不同上下文：
立即学习“前端免费学习笔记（深入）”；
@mixin scrollbar($thumb: #888, $track: #eee, $size: 6px) {
// Firefox
scrollbar-width: thin;
scrollbar-color: $thumb $track;
<p>// WebKit —— 必须用 & 引用父选择器，否则伪元素不生效
&::-webkit-scrollbar {
width: $size;
height: $size;
}
&::-webkit-scrollbar-track {
background: $track;
}
&::-webkit-scrollbar-thumb {
background: $thumb;
border-radius: $size * 0.5;
}
}- 调用时必须作用于有滚动行为的元素，例如
.list { overflow: auto; @include scrollbar(#666, #f5f5f5); } - 别在
@include scrollbar()外再手动加overflow: scroll——滚动条只在内容溢出且overflow为auto/scroll时出现 - 若要隐藏滚动条但保留滚动能力，用
@mixin hide-scrollbars（含scrollbar-width: none+&::-webkit-scrollbar { display: none }），不要只删width
悬停效果和状态响应需分别绑定
Firefox 不支持 ::-webkit-scrollbar-thumb:hover 这类伪类，所以 hover 效果只能作用于 WebKit。但你可以用父元素 :hover 触发整体变化，比如加粗滑块或变亮轨道——这对两个浏览器都有效。
- 安全做法：用
&:hover &::-webkit-scrollbar-thumb { background: darken($thumb, 15%); }控制 WebKit 悬停 - Firefox 下想模拟类似反馈，只能改
scrollbar-color值：&:hover { scrollbar-color: darken($thumb, 15%) $track; } - 避免在
&::-webkit-scrollbar-thumb里用transition——Safari 16.4 之前不支持伪元素动画，会静默失败 - 移动端（iOS Safari）慎用
border-radius超过$size * 0.5，过大圆角在快速滚动时可能闪烁
Vue 或 React 中 scoped style 下的坑
当使用 <style scoped>（Vue）或 CSS Modules（React），&::-webkit-scrollbar 这类伪元素会被加上属性选择器，导致规则失效。例如 .list[data-v-abc123]::-webkit-scrollbar 是无效的——浏览器不匹配带 data 属性的伪元素。
- 解决方案一：把滚动条样式提至全局
<style>块，或单独建scrollbar.scss并@import - 解决方案二：Vue 中用
<style scoped>+deep（::v-deep已废弃，用:deep()）：:deep(.list)::-webkit-scrollbar { ... } - React 中若用 emotion/styled-components，需用
css`&::-webkit-scrollbar {...}`直接注入，不能走 className 映射 - 别在 scoped style 里对
html或body写滚动条规则——它们不受 scoped 影响，但容易污染全局，建议限定到具体组件容器
真正麻烦的不是写法，而是滚动条在 iOS Safari 上的渲染延迟：拖动开始后约 200ms 才显示 thumb，且 scrollbar-width: thin 在 iOS 16.5+ 才稳定生效。如果项目必须兼容 iOS 15，得接受它默认宽度，并用 @supports (scrollbar-gutter: stable both-edges) 做渐进增强——这个特性目前仅 Chrome 117+ 和 Safari 17.4+ 支持，别提前依赖。
