没有万能方案，只有分浏览器针对性写法：firefox仅支持scrollbar-width和scrollbar-color，需用@supports隔离；chrome/edge必须成套写::-webkit-scrollbar并写死尺寸；safari（尤其ios）基本不响应任何css自定义；强一致需求才考虑js方案。
没有“修复兼容性”的万能方案，只有分浏览器、分场景的针对性写法。直接套用一套 CSS 在所有浏览器生效，不可能。
Firefox 只认 scrollbar-width 和 scrollbar-color
它完全不解析 ::-webkit-scrollbar，写了也白写，控制台不会报错，但样式就是不出现。这两个属性必须单独用 @supports (scrollbar-width: thin) 包裹，否则和 WebKit 规则混写会导致整条规则被 Firefox 跳过。
-
scrollbar-width只接受auto、thin、none三个值，没有像素级控制，“thin” 是唯一可调粗细的选项 -
scrollbar-color顺序不能反：scrollbar-color: #666 #eee表示滑块色 + 轨道色；第二个值设为transparent会让轨道消失，但滑块仍可拖，体验断裂 - 它们只对真正触发滚动的容器生效（如设置了
height+overflow-y: auto的div），不是全局作用于* { }
Chrome/Edge 必须成套写 ::-webkit-scrollbar 且显式声明尺寸
漏掉 ::-webkit-scrollbar 自身的 width（垂直）或 height（水平），整个伪元素链就失效——::-webkit-scrollbar-thumb 和 ::-webkit-scrollbar-track 都不会渲染。
-
::-webkit-scrollbar必须写死width: 8px或height: 8px，不能用var(--size)或calc() -
::-webkit-scrollbar-thumb必须设background，否则透明；border-radius别超滑块宽高一半（比如width: 6px时设border-radius: 4px会错位） - 悬停状态必须用
::-webkit-scrollbar-thumb:hover单独写，给父容器加:hover没反应
Chrome 120+ 以后，::-webkit-scrollbar 在非安全上下文下被静默禁用
本地 file:// 协议、HTTP 页面、甚至未配 HTTPS 的 http://dev.example.com 都会被拦截——样式丢弃，控制台无提示，查半天发现是协议问题。
- 开发时必须跑在
https://或localhost（含端口，如localhost:3000）下 - 检查父容器是否设置了
overflow: hidden或transform，这两者会创建新层叠上下文，导致滚动条被裁剪 - 避免在
::-webkit-scrollbar-thumb中使用box-shadow、filter或background-image，这些会引发高频重绘，滚动卡顿
Safari（尤其 iOS）基本不响应 CSS 滚动条定制
macOS Safari 16.4+ 才开始有限支持 scrollbar-width 和 scrollbar-color，但依然不认 ::-webkit-scrollbar；iOS Safari 几乎完全无视所有自定义规则，哪怕写了也大概率不生效。
- 系统设置“自动隐藏滚动条”开启时，所有 CSS 设置直接被忽略
-
::-webkit-scrollbar-thumb:active在 Safari 上根本不触发 - 别依赖
::-webkit-scrollbar-corner或::-webkit-scrollbar-button，macOS 下基本被忽略 - 真要强一致，就得上 JS 方案（如
simplebar或perfect-scrollbar），但代价是 DOM 增重、事件重绑定、无障碍支持变差
最常被忽略的一点：滚动条样式不是“功能”，而是“装饰性降级项”。Chrome 可以精细控制，Firefox 只能调粗细和颜色，Safari 基本放弃。写的时候得先想清楚——这个滚动条，到底是品牌必需品，还是锦上添花的细节？后者就老老实实分层兜底，前者就得接受 JS 方案的维护成本。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
