scrollbar-width 和 scrollbar-color 仅 Firefox 支持，值仅限 auto/thin/none 和两个颜色；::-webkit-scrollbar 需完整三层声明且仅 Chromium 有效，移动端支持差；二者不可混写于同一选择器，须分注浏览器作用域。
Chrome、Edge、新版Opera 和 Safari 都不认 scrollbar-width，它只在 Firefox 里生效——所以别把它和 ::-webkit-scrollbar 混着写成“一套通用方案”，那只会让 Chromium 浏览器忽略掉所有滚动条样式。
Firefox 的 scrollbar-width 和 scrollbar-color 只能设两个值
这两个属性是 Firefox 唯一支持的滚动条控制方式，且能力极其有限：
-
scrollbar-width只接受auto、thin、none——不能写6px或其他具体尺寸 -
scrollbar-color只接受两个颜色值：scrollbar-color: <thumb><track></track></thumb>，中间用空格分隔，不支持圆角、阴影、边框或透明度微调 - 它们必须作用于实际滚动容器（比如
html、body或带overflow: auto的div），但对局部容器的支持不稳定；更稳妥的做法是直接写在:root或html上 - 写了也没法调试：Firefox 开发者工具里不显示这些属性是否生效，只能靠肉眼观察滚动条变细或变色
::-webkit-scrollbar 在 Chromium 系里必须配齐三层才显形
只写 ::-webkit-scrollbar-thumb 是没用的，Chromium 不会渲染任何滚动条伪元素，除非你先声明尺寸：
- 必须定义
::-webkit-scrollbar { width: 8px; height: 8px; }——width控制垂直滚动条粗细，height控制水平滚动条高度 -
::-webkit-scrollbar-track建议设background-color，否则可能透出父级背景，造成视觉断裂 -
::-webkit-scrollbar-thumb必须设background-color或至少border，否则默认不可见；border-radius最大不能超过width / 2（例如width: 6px时，border-radius: 4px就会被截断） - 移动端 Android Chrome 对局部容器的
::-webkit-scrollbar支持极差，iOS Safari 则完全无视——别指望它在手机上一致生效
不要把 WebKit 和 Firefox 规则混写在同一选择器里
很多人习惯这样写：
.container {
scrollbar-width: thin;
scrollbar-color: #666 #eee;
}
.container::-webkit-scrollbar {
width: 8px;
}
这看起来整洁，但其实埋了坑：
- CSS 解析是“按浏览器能力逐条过滤”的，Firefox 会跳过所有
::-webkit-*规则，Chromium 会跳过scrollbar-width，表面上互不干扰，但维护时容易误删某一边 - 更关键的是：如果
.container是个 flex/grid 子项且未触发滚动（比如内容没溢出），WebKit 规则根本不会渲染，而 Firefox 规则又因容器未滚动而不生效，结果是“全白屏无滚动条反馈” - 推荐拆开写，用注释明确标注作用域：
/* Firefox only */和/* Chromium/Safari only */，避免后续接手的人误以为这是跨浏览器通用写法
最常被忽略的一点：滚动条是否出现，取决于容器是否真正滚动——不是看有没有写 overflow: auto，而是看内容高度是否超出容器限制。很多调试失败，其实只是因为测试时内容太短，伪元素压根没生成。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
