firefox仅支持scrollbar-width和scrollbar-color，且只作用于html或body；webkit内核浏览器必须用::-webkit-scrollbar伪元素系列实现，两者语法完全不兼容，无统一写法。
直接说结论：Firefox 和 WebKit 内核（Chrome/Safari/Edge）支持方式完全不同，没有统一语法；IE/旧 Edge 完全不支持任何滚动条定制，只能靠“不写就等于降级”——也就是默认样式就是你的 fallback。
Firefox 的 scrollbar-width 和 scrollbar-color 怎么用才安全？
Firefox 从 64 版本起支持这两个原生属性，但它们只作用于根滚动容器（html 或 body），对 div 等局部滚动元素无效。
-
scrollbar-width只接受auto、thin、none三个值，不能设像素宽度 -
scrollbar-color接收两个颜色值：scrollbar-color: <thumb><track>;</track></thumb>，比如scrollbar-color: rgba(100, 100, 100, 0.4) transparent; - 这两个属性必须写在
html或body选择器里才生效，写在.container::-webkit-scrollbar这类规则里会被忽略 - 不支持时（如 IE、旧 Firefox），整条声明被静默丢弃，不影响其他样式 —— 这本身就是一种“优雅”：没它也不崩
WebKit 内核的 ::-webkit-scrollbar 系列伪元素怎么避免失效？
Chrome、Safari、新版 Edge 都走这套伪元素路线，但它极容易因写法错误导致整块规则被浏览器跳过，尤其在嵌套或简写混用时。
- 必须成对使用：有
::-webkit-scrollbar就得配::-webkit-scrollbar-track和::-webkit-scrollbar-thumb，缺一个可能导致滑块不可见 - 不要在
::-webkit-scrollbar上设background或border—— 它只控制宽度（width/height），其余样式要落到thumb和track上 - 避免用
transition或box-shadow在thumb上——低性能设备会卡顿，且部分旧 Safari 版本不渲染 - 如果父容器用了
overflow: hidden或transform，可能遮挡滚动条，这不是兼容性问题，而是层叠上下文导致的显示异常
为什么不能指望 scrollbar-width: thin 在所有浏览器生效？
这个属性只在 Firefox 有效；Chrome 和 Safari 完全无视它，也不会报错。开发者常误以为加了就能“统一控制”，结果上线才发现 Chrome 滚动条还是默认粗细。
- 别试图用 JavaScript 检测
scrollbar-width支持与否——CSS 层面无法 feature detect，只能 UA 判断，而 UA 字符串不可靠 - 真正跨浏览器的“变细”方案只有两种：
::-webkit-scrollbar控制宽度（WebKit），或接受 Firefox 的thin+ 其他浏览器默认（无干预） - 想强制所有浏览器都细？做不到。所谓“统一”，本质是分别适配，不是写一次通用代码
- 注意：移动端 Safari（iOS）完全不支持任何滚动条定制 API，连
::-webkit-scrollbar都无效 —— 这不是 bug，是设计如此
最易被忽略的一点：滚动条样式是纯视觉增强，不是功能必需项。一旦你开始为它写大量条件判断、JS 适配或 PostCSS 插件，就已经偏离了“优雅降级”的本意——它该是 CSS 里最轻量、最可舍弃的一环。留白、透明、窄宽，这些视觉选择本身就在向旧环境让步；强行塞进所有浏览器，反而让现代体验变重。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
