必须作用于实际触发滚动的块级容器，而非html或body；需同时设置overflow: auto/scroll及内容真实溢出，且::-webkit-scrollbar必须与-track、-thumb成套使用才生效。
直接给 body 或 html 写 ::-webkit-scrollbar 基本无效，这不是漏写了样式，而是浏览器根本不认——滚动条样式必须绑定在「实际触发滚动的块级容器」上。
为什么 ::-webkit-scrollbar 没反应
常见错误是把伪元素直接挂在 :root、html 或 body 上，指望它管全页滚动。但该伪类不继承、不全局生效，只对设置了 overflow: auto 或 scroll 且内容真正溢出的块级元素起作用。
如果想定制页面根滚动条（即整个页面上下滚动的那个），必须显式写：
-
body { overflow-y: scroll; }（不能只靠默认行为） - 再配
body::-webkit-scrollbar才能生效 - 更稳妥的做法是避免动
body，改用一个包裹容器，比如.main-content { height: 100vh; overflow-y: auto; }，然后所有样式都挂在这上面
::-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时颜色设置被忽略 - 推荐组合写法：
body { scrollbar-width: none; scrollbar-color: transparent transparent; }，再叠加 WebKit 规则
隐藏滚动条但保留滚动能力的陷阱
overflow: hidden 会彻底禁用滚动（内容被裁剪），不是“隐藏滚动条”，慎用。
- 隐藏 ≠ 禁用：用
overflow-y: auto或scroll是前提，确保内容仍可拖动或用键盘滚动 -
::-webkit-scrollbar { display: none; }和scrollbar-width: none都只隐藏视觉组件，滚动功能完好 - macOS Safari 下
overscroll-behavior: contain可能干扰手势滚动，要实测 -
overflow: overlay已废弃，别用
最易被忽略的是：自定义滚动条无法作用于 select、textarea 等原生表单控件内部滚动（它们有自己的渲染逻辑），需要封装或换方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
