直接给html或body加::-webkit-scrollbar无效，因该伪元素仅作用于当前可滚动容器；需为每个overflow元素单独定义类名及全套::-webkit-scrollbar规则，且Firefox/Safari兼容写法差异大。
为什么直接给html或body加::-webkit-scrollbar会出问题
因为这类伪元素作用域是“当前选择器所匹配的可滚动容器”，不是全局开关。给html写::-webkit-scrollbar，只会改页面根滚动条；如果内部多个div各自有overflow: auto，它们的滚动条样式完全不受影响——你看到的“没生效”，其实是样式根本没打到目标容器上。
常见错误现象：div里滚动条还是默认粗灰样式，或者只在 Chrome 里变细、Firefox 里消失、Safari 里完全没反应。
- 必须为每个需要自定义的
div单独写类名，并把::-webkit-scrollbar系列规则挂在这个类名下 - 不能依赖“父级设了，子级继承”——滚动条伪元素不继承，也不级联
-
body上设scrollbar-width或scrollbar-color在 Firefox 中也无效，这两个属性只对明确设置了overflow的块级元素起作用
div容器滚动条样式必须成套声明的三个关键伪元素
Chrome/Edge（WebKit 内核）中，漏掉任意一个，整个链就回退到系统默认样式。不是“部分生效”，而是“全失效”。
-
::-webkit-scrollbar：必须设width（垂直滚动）或height（水平滚动），常见值6px～10px；不设=无样式 -
::-webkit-scrollbar-track：轨道背景建议用background，别用box-shadow（它不渲染）；border-radius可以设，但别超过宽高一半 -
::-webkit-scrollbar-thumb：background是刚需，透明=看不见滑块；border-radius设太大（比如6px宽的滑块配4px圆角）会导致视觉错位
示例（仅限 WebKit）：
立即学习“前端免费学习笔记（深入）”；
.scroll-box {
overflow-y: auto;
}
.scroll-box::-webkit-scrollbar {
width: 8px;
}
.scroll-box::-webkit-scrollbar-track {
background: #f5f5f5;
border-radius: 4px;
}
.scroll-box::-webkit-scrollbar-thumb {
background: #999;
border-radius: 4px;
}
Firefox 和 Safari 的兼容写法不能混用，且能力差异极大
Firefox 完全忽略所有::-webkit-前缀，只认两个 CSS 属性，而且只在有overflow的元素上生效；Safari 对::-webkit-scrollbar支持极不稳定，iOS Safari 16.4+ 才开始有限支持，macOS Safari 基本不响应:hover或:active。
- Firefox 必须写：
scrollbar-width: thin（仅auto/thin/none三值） +scrollbar-color: #999 #f5f5f5（顺序不能反，第二个参数不能是transparent） - Safari 不支持
scrollbar-width，scrollbar-color只在部分版本有效；::-webkit-scrollbar-thumb:hover大概率不触发，别依赖 - 想让三端都显示圆角+悬停变色+Safari 正常拖动？原生方案做不到。这时候该换
simplebar这类 JS 库，它用绝对定位重绘滚动条，绕过浏览器限制
多层级嵌套div滚动条样式容易被覆盖的典型场景
当外层div和内层div都设置了overflow，而你只给外层写了自定义样式，内层滚动条依然走默认——这不是 bug，是设计如此。每个可滚动容器独立管理自己的滚动条样式。
- 检查 DOM 结构：是否有多层
overflow: auto的div？每层都要加对应 class 并配齐伪元素规则 - 避免用
!important强行覆盖：WebKit 伪元素优先级本身就高，乱加!important反而导致 Safari 更难调试 - 如果某层滚动条不需要自定义（比如只是布局容器），显式设
overflow: visible或移除overflow，减少干扰
最易被忽略的一点：Safari 对::-webkit-scrollbar-corner和::-webkit-scrollbar-button基本无视，但开发者常误以为它们能控制角落样式——实际连渲染都不保证，别白费时间调。
