scrollbar-color 和 scrollbar-width 是唯二支持 CSS 自定义变量的标准化滚动条属性，Firefox 全支持，Chrome/Edge v120+ 起支持；需作用于可滚动容器本身，不继承、不响应 ::-webkit-scrollbar。
scrollbar-color 和 scrollbar-width 是 CSS 原生变量友好型属性
这两个属性是目前唯一被标准化、支持 CSS 自定义属性（--my-color）直接赋值的滚动条相关属性。Firefox 完全支持，Chrome/Edge 从 v120+ 开始也已实现（截至 2026 年 4 月）。它们不依赖 ::-webkit-scrollbar，也不受作用域限制，能天然响应 :root 或组件级变量变化。
用法很简单：
-
scrollbar-color接收两个颜色值：thumb track，顺序不能反 -
scrollbar-width只支持auto、thin、none三个关键字，不能用var(--size)赋具体像素值 - 必须作用于**可滚动容器本身**，比如
.scroll-container或body，不能写在::-webkit-scrollbar伪元素上
示例：
:root {
--scroll-thumb: #4a90e2;
--scroll-track: #f5f5f5;
}
.scroll-container {
scrollbar-color: var(--scroll-thumb) var(--scroll-track);
scrollbar-width: thin;
overflow-y: auto;
}
::-webkit-scrollbar 不支持 CSS 变量，但可用预处理变量“模拟”
::-webkit-scrollbar 及其子伪元素（::-webkit-scrollbar-thumb 等）**完全不支持 var() 函数**。浏览器会静默忽略含 var() 的声明。这是 WebKit/Blink 内核的硬性限制，不是兼容性问题。
立即学习“前端免费学习笔记（深入）”；
如果你用 Sass/Less/PostCSS，可以借助预处理器变量“提前编译”：
- Sass 示例：
$thumb-color: #4a90e2; .box::-webkit-scrollbar-thumb { background-color: $thumb-color; } - 不要写：
background-color: var(--thumb-color);—— 这行无效 - 注意：Vue 的
<style scoped></style>中若用::-webkit-scrollbar，仍需配合:deep()穿透，否则样式不生效
为什么 scrollbar-width 不能设成 8px？
scrollbar-width 的规范定义就是仅接受关键字，不是长度单位。试图写 scrollbar-width: 8px 会导致该声明被整个丢弃，回退到 auto（即浏览器默认宽度）。
真正能控制精确像素宽度的，只有 ::-webkit-scrollbar { width: 8px; }。这意味着：
- 想统一所有浏览器的滚动条粗细 → 必须用
::-webkit-scrollbar+scrollbar-width: thin组合，并接受 Firefox 略细、Chrome 可微调的现实 - 设计系统中若强调“严格一致”，建议把
scrollbar-width: thin当作降级兜底，核心宽度逻辑放在 WebKit 规则里 - 移动端 Safari 对
scrollbar-width完全无视，只认::-webkit-scrollbar
滚动条变量化最易被忽略的坑：作用域与继承失效
滚动条样式**不会继承**父元素的 CSS 变量，哪怕你给 html 设了 --scroll-thumb，子容器不显式声明 scrollbar-color: var(--scroll-thumb) 就不会生效。
更隐蔽的问题是：
- Ant Design / Element Plus 等组件库的表格滚动容器（如
.ant-table-body、.el-table__body-wrapper）通常不暴露为可直接加 class 的 DOM 节点，变量必须通过:deep()或全局样式注入 - 当使用
scrollbar-color时，如果容器同时设置了overflow: hidden或内容未溢出，该属性会被忽略——它只在滚动行为实际存在时起效 - 深色模式切换时，
scrollbar-color可以响应媒体查询，但::-webkit-scrollbar需要手动重写整套规则
变量化的本质不是“写一次到处用”，而是“在正确的位置、用正确的语法、对正确的元素赋值”。漏掉任何一个环节，滚动条就退回默认丑态。
