Sass 中直接写 ::-webkit-scrollbar 会失效，因其为 WebKit 专属非标准伪元素，需用引号包裹如 "&::-webkit-scrollbar"；应通过 @mixin 同时兼容 WebKit 和 Firefox，并优先考虑 CSS 变量或 Tailwind 工具类实现主题动态控制。
为什么直接写 ::-webkit-scrollbar 在 Sass 里会失效
因为 ::-webkit-scrollbar 及其子伪元素（如 ::-webkit-scrollbar-track）是 WebKit 专属的非标准伪元素，Sass 编译器默认不识别它们的嵌套语法。如果你写成：
.box {
&::-webkit-scrollbar {
width: 8px;
}
}
编译后可能生成错误的选择器（比如 .box::-webkit-scrollbar 被误处理为 .box -webkit-scrollbar），尤其在启用了某些旧版 Dart Sass 兼容模式或使用了 @use 规则但未正确配置时。
- 必须用引号包裹完整伪元素名：
"&::-webkit-scrollbar"，不能拆开或省略冒号 - Sass 3.5+ 支持原生伪类插值，但
::-webkit-scrollbar是特例，需显式字符串拼接 - Firefox 和 IE 完全不支持该伪元素，
scrollbar-width和scrollbar-color是仅有的跨浏览器替代方案
如何用 @mixin 封装滚动条样式并兼顾兼容性
一个实用的 @mixin 应同时覆盖 WebKit 内核和 Firefox，并降级处理不支持的环境。不要只封装 WebKit 部分，否则上线后在 Firefox 里滚动条会完全回退到系统默认样式，且无法控制粗细或颜色。
@mixin custom-scrollbar($thumb-bg: #c1c1c1, $track-bg: #f1f1f1, $thumb-radius: 4px) {
// Firefox
scrollbar-width: thin;
scrollbar-color: $thumb-bg $track-bg;
// WebKit
&::-webkit-scrollbar {
width: 8px;
height: 8px;
}
&::-webkit-scrollbar-track {
background: $track-bg;
}
&::-webkit-scrollbar-thumb {
background-color: $thumb-bg;
border-radius: $thumb-radius;
border: 2px solid $track-bg;
}
&::-webkit-scrollbar-thumb:hover {
background-color: darken($thumb-bg, 10%);
}
}
- 参数用默认值，避免调用时强制传参；
$thumb-bg和$track-bg建议用灰阶色，避免在深色模式下翻车 - 必须加
&::-webkit-scrollbar-thumb:hover，否则用户感知不到可交互——很多团队漏掉这行，导致滚动条“看起来不可拖” - Firefox 的
scrollbar-color只接受两个颜色值（thumb + track），不支持圆角或边框，这是它和 WebKit 的根本差异
什么时候该用 @include，什么时候该用 CSS 自定义属性动态控制
如果滚动条颜色需要随主题切换（比如 light/dark mode），硬编码在 @mixin 里就不够灵活。此时应把颜色抽成 CSS 变量，@mixin 只负责结构逻辑：
立即学习“前端免费学习笔记（深入）”；
@mixin theme-aware-scrollbar {
scrollbar-color: var(--scrollbar-thumb, #aaa) var(--scrollbar-track, #eee);
&::-webkit-scrollbar-thumb {
background-color: var(--scrollbar-thumb, #aaa);
}
&::-webkit-scrollbar-track {
background-color: var(--scrollbar-track, #eee);
}
}
- 在
:root或组件 scope 中通过 JS 或媒体查询设置--scrollbar-thumb，比重复@include多个主题 mixin 更轻量 - 注意：WebKit 不支持在
::-webkit-scrollbar伪元素中使用var()，所以必须搭配 JS 动态写入 style 或用@media (prefers-color-scheme)预设 - 若项目已用 Tailwind，别自己封装——直接用
scrollbar-thin scrollbar-thumb-gray-400等工具类更稳妥，Sass Mixin 在原子化 CSS 场景下反而增加维护成本
容易被忽略的布局与交互陷阱
自定义滚动条不是纯视觉装饰，它直接影响容器尺寸计算和事件响应。最常出问题的是 overflow 和 padding 的组合。
- 给容器设
overflow-y: scroll后，即使内容没溢出，WebKit 也会强制显示空滚动条轨道（占空间），建议统一用overflow-y: auto - 滚动条宽度计入
padding-right会导致右侧内容被遮挡，需用padding-right: calc(1em + 8px)补齐（8px 是::-webkit-scrollbar宽度） - 移动端 Safari 对
::-webkit-scrollbar支持极差，iOS 16+ 才开始部分支持scrollbar-width，真要兼容 iOS，得用overscroll-behavior+ 自研滚动条组件 - 若容器有
transform（如translateZ(0)），某些旧版 Chrome 下::-webkit-scrollbar样式会丢失，需加will-change: scroll-position强制重绘
