全局滚动条样式必须用 body 选择器写 ::-webkit-scrollbar 规则，因页面级滚动条仅属于 body；scrollbar-color/width 不支持 css 变量，需通过 :root 定义后在各伪元素中手动引用；firefox 仅支持 scrollbar-color/width 且无视 ::-webkit- 规则。
全局滚动条样式必须用 body 或 html 作为选择器
直接写 ::-webkit-scrollbar 规则但没挂载到根元素上，样式不会生效。Chrome/Safari 只对 body、html 或设置了 overflow: scroll/auto 的容器内滚动条应用这些伪元素——而页面级滚动条只属于 body（或 html，取决于浏览器默认渲染树）。所以第一件事是确认作用域：
- 想改整个页面的滚动条？必须写在
body上，例如body::-webkit-scrollbar - 用
html也可以，但部分旧版 Safari 对html::-webkit-scrollbar支持不稳定，推荐统一用body - 别试图用类名如
.app-container::-webkit-scrollbar去“全局”控制——它只影响该容器内的局部滚动，不是页面主滚动条
scrollbar-color 和 scrollbar-width 不能用 CSS 变量动态赋值
这两个标准属性看起来简洁，但有个硬限制：它们**不接受 CSS 自定义属性（var(--color)）作为值**。浏览器解析时会直接忽略非法值，回退到默认样式。也就是说，你不能这样写：
body {
scrollbar-color: var(--thumb-color) var(--track-color);
scrollbar-width: var(--scrollbar-width);
}
原因在于规范尚未支持变量注入——它们被设计为静态控制开关，而非样式系统的一部分。所以“变量统一控制”只能靠 ::-webkit-scrollbar 系列伪元素 + 预处理器（如 Sass）或构建时替换来实现，纯 CSS 不行。
用 CSS 变量驱动 ::-webkit-scrollbar 样式需手动映射
虽然伪元素本身不支持 var()，但你可以把变量定义在 :root，再在每个伪元素规则里显式引用。这是目前最实用的“伪变量统一”方案：
:root {
--scrollbar-width: 8px;
--scrollbar-thumb: #6c757d;
--scrollbar-track: #f8f9fa;
}
body::-webkit-scrollbar {
width: var(--scrollbar-width);
}
body::-webkit-scrollbar-thumb {
background-color: var(--scrollbar-thumb);
border-radius: 4px;
}
body::-webkit-scrollbar-track {
background-color: var(--scrollbar-track);
}
- 注意：每个伪元素都得单独写一遍
var()，CSS 不会自动继承或透传变量到伪元素上下文 -
border-radius、box-shadow这类修饰属性没法用变量“批量控制”，必须逐条写死或靠预处理器生成 - Firefox 完全无视这些
::-webkit-规则，所以仍要配scrollbar-color作降级（哪怕颜色值写死）
Firefox 兼容必须用 scrollbar-color 单独声明
Firefox 只认 scrollbar-color 和 scrollbar-width，且只支持在 body 或 html 上设置。它对 ::-webkit- 伪元素完全无反应。这意味着：
- 你无法用同一套变量同时控制 Chrome 和 Firefox 的滑块圆角、阴影等细节——Firefox 只能调颜色和宽窄
-
scrollbar-color的值顺序是thumb track，写反了颜色就错位，比如scrollbar-color: #f00 #eee表示红滑块+灰轨道 -
scrollbar-width: thin在 Firefox 中实际宽度由 UA 决定，不同版本可能渲染出 6px 或 8px，不能精确控制
真正复杂的滚动条定制（比如带渐变、内阴影、hover 缩放）永远只在 WebKit 内核生效，Firefox 用户看到的只是基础色块——这点常被忽略，但直接影响设计落地一致性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
