chrome/edge中::-webkit-scrollbar需成套作用于具体可滚动容器（如div），而非html或body；必须包含::-webkit-scrollbar（设宽高）、::-webkit-scrollbar-track（设背景）、::-webkit-scrollbar-thumb（设背景）三者，缺一即回退默认样式。
Chrome/Edge 里怎么写 ::-webkit-scrollbar 才生效
直接给 html 或 body 写 ::-webkit-scrollbar 基本没用——它只对「实际触发滚动的容器」起作用，比如设置了 overflow: auto 且内容真溢出的 div。
必须成套定义，漏掉任意一个关键伪元素，整个自定义就回退到默认样式：
-
::-webkit-scrollbar控制宽高：垂直滚动条用width（推荐8px–12px），水平用height -
::-webkit-scrollbar-track必须设background，否则轨道透明，和页面底色混在一起 -
::-webkit-scrollbar-thumb必须设background，否则滑块不可见；border-radius别超过一半宽高，否则视觉异常 -
::-webkit-scrollbar-thumb:hover和::-webkit-scrollbar-thumb:active要单独写，不能靠普通 CSS 伪类继承
Firefox 怎么适配 scrollbar-width 和 scrollbar-color
Firefox 完全不认 ::-webkit-scrollbar，只支持两个属性，而且只对根滚动容器（html 或显式设了 overflow 的块级元素）有效。
这两个属性是开关型的，没法改圆角、加阴影、做渐变：
-
scrollbar-width只接受auto、thin、none；设其他值会被忽略 -
scrollbar-color格式固定：scrollbar-color: <thumb-color><track-color></track-color></thumb-color>，顺序反了就失效 - 必须搭配使用：
scrollbar-width: thin才会让scrollbar-color生效；scrollbar-width: none时颜色设置被忽略 - 对嵌套的
div滚动容器无效，除非该div显式设了overflow: auto并真正溢出
Safari 和 iOS 上为什么自定义滚动条总不生效
Safari（包括 macOS 和 iOS）基本不支持 ::-webkit-scrollbar，哪怕它也是 WebKit 内核。Safari 16.4+ 才开始部分支持 scrollbar-width 和 scrollbar-color，但依然不支持伪元素定制。
更关键的是：macOS 系统偏好里如果开了「自动隐藏滚动条」，网页的 CSS 设置会被系统策略无视——这是浏览器无权覆盖的。
- iOS 上触摸滚动惯性极强，自定义滚动条容易干扰原生手感
- 别指望一套代码全平台兼容，真要统一外观，只能用 JS 库（如
simplebar或overlay-scrollbars）接管滚动逻辑 - 若只是微调，建议 Safari 下保持默认，或用
@supports (-webkit-appearance: none)做特性检测后降级处理
局部滚动容器的样式怎么绑定才不踩坑
很多人把 ::-webkit-scrollbar 直接挂在 body 上，结果局部滚动区域（比如弹窗里的 .modal-body）完全没反应——因为样式没绑定到目标容器上。
正确做法是把所有伪元素选择器都限定在具体滚动容器内：
- 先确保容器有明确尺寸和
overflow-y: auto（不是scroll，避免空轨道） - 样式写成
.scroll-container::-webkit-scrollbar，而不是body::-webkit-scrollbar -
overflow: overlay已废弃，别用；overscroll-behavior: contain可能干扰 macOS Safari 手势滚动，上线前务必实测 - 移动端 Safari 对局部滚动的
scrollbar-width支持不稳定，优先用 JS 方案兜底
最麻烦的不是写错一行代码，而是误以为「写了就生效」——不同浏览器内核机制完全不同，同一套 CSS 在 Chrome 里完美，在 Firefox 里静默失效，在 Safari 里干脆被系统策略屏蔽。兼容性判断得靠实测，不是靠文档推测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
