直接给body或html写::-webkit-scrollbar基本无效，因该伪元素不继承、不全局生效，仅对设置了overflow: auto/scroll且内容真实溢出的块级容器起作用；必须绑定到实际滚动容器上并成套定义所有必要伪元素。
直接给 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设transparent会导致轨道消失，但滑块仍可拖（不推荐） - 必须搭配使用：
scrollbar-width: thin才会让scrollbar-color生效；scrollbar-width: none时滚动条彻底隐藏，颜色设置被忽略
::-webkit-scrollbar-button 隐藏不生效的真因
写了 ::-webkit-scrollbar-button { display: none; } 但上下按钮还在？问题往往不在伪元素本身，而在于同一个滚动容器上同时设置了 scrollbar-width/scrollbar-color。
在一些 Chromium 版本下，当元素上设置了这些标准滚动条属性后，浏览器会优先走标准渲染路径，导致 ::-webkit-scrollbar* 规则部分失效，表现就是按钮隐藏失败。
- 修复方式很简单：在该滚动容器上把标准属性显式重置为
scrollbar-width: auto（必要时加!important） - 确保
scrollbar-color也一并重置，或干脆不设，让 WebKit 伪元素规则接管 - 移动端 Safari 对
::-webkit-scrollbar-button支持极弱，基本不显示按钮，无需强求隐藏
最易被忽略的一点：自定义滚动条不是“加”出来的，而是由容器尺寸 + overflow + 内容溢出三者共同触发的；样式失效，八成先卡在前两步——检查高度是否固定、overflow 是否设对、内容是否真溢出，比死磕伪元素更省时间。
