scrollbar-color和scrollbar-width是唯二支持CSS变量的滚动条属性，Firefox全支持，Chrome/Edge自v120+起支持；前者接收两个颜色值（滑块在前、轨道在后），后者仅接受auto/thin/none关键字，且必须作用于可滚动容器本身。
scrollbar-color 和 scrollbar-width 是唯二支持 CSS 变量的滚动条属性
只有 scrollbar-color 和 scrollbar-width 能直接使用 var(--color)，其他所有 ::-webkit-scrollbar 相关伪元素（如 ::-webkit-scrollbar-thumb）完全不识别 var() —— 浏览器会静默丢弃整条声明，不会报错也不会 fallback。
Firefox 全支持这两个属性；Chrome/Edge 自 v120+（2024 年起）也已支持，截至 2026 年 6 月已是稳定行为。
-
scrollbar-color接收两个值：var(--thumb)var(--track)，顺序不能颠倒（滑块在前，轨道在后） -
scrollbar-width只接受auto、thin、none三个关键字，**不能写var(--width)或8px** —— 写了就失效，回退到auto - 必须作用于**可滚动容器本身**，例如
.list-view或body，写在::-webkit-scrollbar上无效
::-webkit-scrollbar 伪元素无法用 CSS 变量，但可以“预编译”或“覆盖”
想让 WebKit 浏览器（Chrome/Safari/Edge）响应主题切换？别用 background-color: var(--thumb)，它什么都不会做。
可行方案只有两种：
- 用 Sass/Less 等预处理器提前注入变量：
$thumb: #4a90e2; .box::-webkit-scrollbar-thumb { background-color: $thumb; } - 用 JavaScript 动态写内联样式：
el.style.setProperty('--thumb', '#4a90e2')，再配合::-webkit-scrollbar-thumb { background-color: var(--thumb); }—— 这招在 Vue/React 中常被误用，实际仍无效，因为伪元素不读取运行时变量 - 真正可靠的动态方式：用
document.documentElement.classList.toggle('dark')切换 class，然后写两套独立规则：.dark ::-webkit-scrollbar-thumb { background: #5a5a5a; }
为什么 scrollbar-width 设成 8px 没反应？
因为规范明确限定 scrollbar-width 是关键字枚举值，不是长度类型。写 scrollbar-width: 8px 或 scrollbar-width: var(--size) 都会导致该声明被浏览器整个忽略，最终按 auto 渲染。
真要控制精确像素宽度，唯一办法是：
- 对 WebKit 浏览器：用
::-webkit-scrollbar { width: 8px; } - 对 Firefox：只能接受
scrollbar-width: thin的近似值（约 8–10px，取决于系统 DPI） - 若设计系统要求严格一致，建议把
scrollbar-width: thin当作降级兜底，核心宽度逻辑只放在::-webkit-scrollbar规则里
容易被忽略的生效前提：容器必须真实滚动
再漂亮的变量配置，如果容器没触发滚动行为，所有样式都白写。常见失效原因：
- 容器高度设为
height: 100%但父级没高度约束，导致内部内容未溢出 - 用了
flex: 1却没给 flex 容器设min-height或固定高 -
overflow没设对：必须是auto或scroll，visible或hidden不会激活滚动条伪元素 - 某些 UI 库（如 Ant Design）默认重置
::-webkit-scrollbar { display: none; }，需用!important覆盖（虽不优雅，但有时不得不）
检查是否生效最直接的办法：打开 DevTools → Elements → 选中容器 → Computed 面板搜 overflow，确认值为 auto 或 scroll；再搜 scrollbar，看相关样式是否被应用或覆盖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
