不同浏览器滚动条样式需分内核定制：Chrome/Edge用::-webkit-scrollbar伪元素成套设置；Firefox仅支持scrollbar-width和scrollbar-color两个属性；Safari及移动端受限于系统策略，建议降级或使用JS库替代。
滚动条样式在不同浏览器中无法用一套 CSS 统一实现，必须按内核分写，且不能简单“覆盖”或“继承”。核心思路是：Chrome/Edge 用伪元素精细控制，Firefox 用两个开关型属性，Safari（尤其 macOS/iOS）基本放弃原生定制，靠降级或 JS 库兜底。
Chrome/Edge：成套写伪元素，漏一个就失效
只对设置了 overflow: auto 或 scroll 的具体容器生效，不能直接写 ::-webkit-scrollbar 全局作用。必须绑定到实际滚动元素上，比如 .list-box::-webkit-scrollbar。
-
::-webkit-scrollbar控制宽高：垂直滚动条设width（建议 8px–12px），太小会被浏览器强制拉高 -
::-webkit-scrollbar-track必须设background，否则轨道透明，和页面底色混在一起；可加border-radius，但别超过宽度一半 -
::-webkit-scrollbar-thumb必须设background，否则滑块不可见；hover和active状态要单独写::-webkit-scrollbar-thumb:hover - 四个伪元素（
scrollbar、track、thumb、corner）最好成套出现，漏掉track或thumb容易回退默认样式
Firefox：只认两个属性，顺序不能错
完全不识别 ::-webkit- 系列，只响应 scrollbar-width 和 scrollbar-color，且仅对根滚动容器（如 html 或显式设置了 overflow 的块级元素）有效，对嵌套 div 滚动无效。
-
scrollbar-width只接受auto、thin、none—— 写thick或像素值会被忽略 -
scrollbar-color格式固定：scrollbar-color: #666 #f0f0f0，第一个是滑块色，第二个是轨道色；顺序反了就失效 - 必须搭配使用：
scrollbar-width: thin才会让scrollbar-color生效；设none则滚动条彻底隐藏，颜色设置被忽略
Safari 和移动端：系统级限制多，别硬刚
Safari（包括 macOS 和 iOS）从 16.4+ 才开始支持 scrollbar-width 和 scrollbar-color，但依然不支持 ::-webkit-scrollbar。更关键的是：macOS 系统偏好里若开启“自动隐藏滚动条”，网页 CSS 设置会被无视 —— 这是系统策略，网页无权覆盖。
- iOS 上触摸滚动惯性极强，自定义滚动条容易干扰手感，通常建议保留系统默认样式
- 真要统一外观，只能放弃原生滚动条，用 JS 库接管，比如
simplebar或overlay-scrollbars - 若只需微调，可用
@supports (-webkit-appearance: none)做特性检测，对 Safari 单独降级为简洁灰阶样式或保持默认
写法建议：先写 Firefox，再覆盖 WebKit
把 scrollbar-width 和 scrollbar-color 放在前面，后面跟 ::-webkit-scrollbar 规则。这样 Firefox 读到前两行就停，WebKit 浏览器会继续解析后面的伪元素规则，避免冲突。
- 不要给
body或html直接写伪元素，指望它管全页滚动 —— 大概率没反应 - 推荐用包裹容器（如
.main-content { height: 100vh; overflow-y: auto; }），所有样式都挂在这上面，可控性更强 -
overflow: overlay已废弃，别用；overscroll-behavior在 Safari 上可能干扰手势滚动，上线前务必实测
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
