直接写::-webkit-scrollbar在SCSS中失效，根本原因是Firefox完全不识别该伪类，若与scrollbar-width等混写于同一规则块，Firefox会整条丢弃；必须用@at-root或@supports物理隔离WebKit与Firefox样式，且滚动容器需满足overflow触发条件。
为什么直接写 ::-webkit-scrollbar 在 SCSS 里会失效
不是 SCSS 的问题，是浏览器解析规则导致的：Firefox 完全不识别 ::-webkit-scrollbar 系列伪类，一旦你把 WebKit 规则和 Firefox 规则（如 scrollbar-width）混在同一个选择器或同一段 @include 中，Firefox 会整条规则丢弃——连带后面的 scrollbar-color 也失效。
常见错误写法：
.scroll-box {
scrollbar-width: thin;
scrollbar-color: #6c63ff #f5f5f5;
&::-webkit-scrollbar { width: 8px; }
&::-webkit-scrollbar-thumb { background: #6c63ff; }
}
上面这段代码在 Firefox 里，scrollbar-width 和 scrollbar-color 都不会生效，因为整个规则块被当作无效 CSS 忽略了。
- 必须用
@at-root或@supports把 WebKit 和 Firefox 规则物理隔离 - 不能依赖父选择器链传递 ——
::-webkit-scrollbar必须是顶层选择器（即不能嵌套在&里） - SCSS 变量可以复用，但输出时必须分开展开
用 @mixin + @at-root 封装跨浏览器滚动条
这是目前最稳妥、可复用性最强的 SCSS 封装方式。核心是让 WebKit 和 Firefox 样式分别输出为独立规则块，互不干扰。
立即学习“前端免费学习笔记（深入）”；
示例封装：
@mixin scrollbar($thumb: #6c63ff, $track: #f5f5f5, $size: 8px) {
// Firefox only
scrollbar-width: thin;
scrollbar-color: $thumb $track;
// WebKit only —— 必须用 @at-root 提升到全局作用域
@at-root {
&::-webkit-scrollbar {
width: $size;
height: $size;
}
&::-webkit-scrollbar-track {
background: $track;
border-radius: $size / 2;
}
&::-webkit-scrollbar-thumb {
background: $thumb;
border-radius: $size / 2;
}
&::-webkit-scrollbar-thumb:hover {
background: darken($thumb, 15%);
}
}
}
调用时只需：
.data-list {
max-height: 300px;
overflow-y: auto;
@include scrollbar(#5897fb, #f0f0f0, 6px);
}
-
@at-root是关键，它确保::-webkit-scrollbar规则不被包裹在父选择器内，避免 Safari/Chrome 解析失败 - Firefox 无视所有
::-webkit-*，所以它只读取前面两行，完全不受影响 - 变量统一管理颜色和尺寸，改一处，两端同步更新
哪些容器上加 @include scrollbar 会没效果
即使 SCSS 编译正确，样式也可能不生效——根本原因还是滚动行为未触发。以下情况会导致 ::-webkit-scrollbar 和 scrollbar-width 同时静默：
- 容器没有显式设置
height或max-height，仅靠flex: 1撑高（父级若无高度约束，子级无法溢出） - 父级设置了
overflow: hidden，直接截断滚动能力 - 内容高度 ≤ 容器高度，压根没滚动需求，浏览器根本不渲染滚动条
- 用了某些 UI 库（如 Ant Design、Element Plus），它们在基础重置中写了
::-webkit-scrollbar { display: none }，得用更高优先级覆盖
验证是否真有滚动：打开 DevTools，在 Elements 面板里手动拖动元素高度，看滚动条是否出现；或者临时加 border: 1px solid red 看容器实际尺寸是否符合预期。
深色模式、缩放、动画等边缘场景怎么处理
滚动条不是静态装饰，它要响应系统级变化。硬编码颜色或尺寸，在 prefers-color-scheme: dark 或 zoom: 125% 下会立刻露馅。
推荐做法：
- 用 CSS 自定义属性替代 SCSS 变量：
--scroll-thumb: #6c63ff，然后在@media (prefers-color-scheme: dark)里重设 -
scrollbar-width: thin在高缩放下可能变粗，可用@container查询或 JS 监听visualViewport.scale动态切换 class -
prefers-reduced-motion: reduce下禁用:hover过渡——不要给::-webkit-scrollbar-thumb:hover加transition，否则 WCAG 2.2 AA 不合规
真正难的不是写出第一版样式，而是让这根细条在各种系统偏好、缩放比例、主题切换下始终“存在感恰到好处”——它得隐身于交互中，又不能彻底消失。
