::-webkit-scrollbar 必须作用于实际触发滚动的块级容器，而非 html 或 body；需成套定义 track 和 thumb 并设 background，firefox 仅支持 scrollbar-width/thin 和 scrollbar-color，ios safari 基本不支持。
直接给 body 或 html 写 ::-webkit-scrollbar 基本无效，这不是漏写样式，而是浏览器压根不认——滚动条样式必须绑定在「实际触发滚动的块级容器」上。
为什么 ::-webkit-scrollbar 没反应
常见错误是把伪元素直接挂在 :root、html 或 body 上，指望它管全页滚动。但 ::-webkit-scrollbar 不继承、不全局生效，只对设置了 overflow: auto 或 scroll 且内容真正溢出的块级元素起作用。
如果想定制页面根滚动条（即整个页面上下滚动的那个），必须显式写 body { overflow-y: scroll; }，再配 body::-webkit-scrollbar；更稳妥的做法是避免动 body，改用一个包裹容器，比如 .main-content { height: 100vh; overflow-y: auto; }，然后所有样式都挂在这上面。
-
overflow: overlay已废弃，别用 -
overscroll-behavior: contain可能干扰 macOS Safari 手势滚动，要测
::-webkit-scrollbar 必须成套写才生效
漏掉 ::-webkit-scrollbar-track 或 ::-webkit-scrollbar-thumb 中任意一个，Chrome/Edge 就可能回退到默认样式，不是“部分生效”，而是整个自定义逻辑失效。
-
::-webkit-scrollbar控制宽高：垂直滚动条设width，水平滚动条设height；建议8px–12px，太小（如width: 4px）会被浏览器强制拉高 -
::-webkit-scrollbar-track必须设background，否则轨道透明，和页面底色打架；可加border-radius，但别超过一半宽度，否则视觉异常 -
::-webkit-scrollbar-thumb必须设background，否则滑块不可见；hover和active状态要用::-webkit-scrollbar-thumb:hover单独写，不能靠普通伪类
Firefox 怎么适配：只认两个属性
Firefox 完全无视 ::-webkit- 系列，只响应 scrollbar-width 和 scrollbar-color，而且这两个属性只对根滚动容器（html 或有 overflow 的块级元素）有效，对嵌套 div 滚动无效。
-
scrollbar-width只接受auto、thin、none；设thick或其他值会被忽略，回退默认 -
scrollbar-color格式固定：scrollbar-color: <thumb-color><track-color></track-color></thumb-color>，顺序反了就失效 - 必须搭配使用：
scrollbar-width: thin才会让scrollbar-color生效；scrollbar-width: none时滚动条彻底隐藏，颜色设置被忽略
横向滚动条美化要先确保结构正确
横向滚动不是加个 overflow-x: scroll 就完事——如果子元素没横向排列、总宽度没撑开，滚动根本不会触发。
- 外层容器需设
overflow-x: auto或scroll，并限制宽度（如width: 100%或固定值） - 内层内容需用
display: flex+flex-wrap: nowrap，子项不换行，且总宽度 > 外层 - 横向滚动条的
::-webkit-scrollbar要设height（不是width），::-webkit-scrollbar-thumb推荐加border-radius: 4px防止两端尖锐 - 移动端 Safari 对
::-webkit-scrollbar支持极弱，iOS 上基本不可见，别依赖它做关键交互提示
最易被忽略的是：滚动条样式是否绑定在「真正在滚动的元素」上，而不是它父级或文档根；以及 Firefox 和 Safari 的降级路径是否真实可用——写了 scrollbar-color 却忘了配 scrollbar-width: thin，等于白写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
