::-webkit-scrollbar 无效因触发条件未满足：须成套声明、容器需显式 overflow-y:auto 且为块级元素、自身须设 width/height、不可写在 html/body 上；Firefox 仅支持 scrollbar-width 和 scrollbar-color，且有严格语法和作用域限制；iOS/macOS 支持极弱，系统设置可覆盖 CSS；内容真实溢出才是滚动前提。
直接写 ::-webkit-scrollbar 没反应，不是代码写错了，而是它根本没被浏览器“看见”——这个伪元素只在特定条件下生效，漏掉任一环节就会完全失效。
为什么 ::-webkit-scrollbar 写了却没效果
这不是样式优先级或拼写问题，而是触发条件未满足：
-
::-webkit-scrollbar必须成套出现：::-webkit-scrollbar、::-webkit-scrollbar-track、::-webkit-scrollbar-thumb缺一不可；只写其中两个，Chrome/Edge 大概率回退到默认滚动条 - 容器必须显式设置
overflow-y: auto（或scroll），且是块级元素；display: inline或未设宽高的div不会触发滚动上下文，伪元素不渲染 -
::-webkit-scrollbar自身必须设width（垂直）或height（水平）；值为0、未声明、或太小（如width: 4px）会被浏览器强制修正甚至忽略整条规则链 - 不能挂在
html或body上指望全局生效；它只作用于当前元素的滚动容器，写在根上容易污染全站，且 macOS Safari 对body的支持极不稳定
scrollbar-width 和 scrollbar-color 在 Firefox 中不生效
Firefox 完全无视所有 ::-webkit- 伪类，只认这两个属性，但它们有严格限制：
- 必须写在「实际触发滚动的块级元素」上，比如
.chat-log { scrollbar-width: thin; scrollbar-color: #666 #eee; }；写在* { }或html上只影响根滚动，对嵌套容器无效 -
scrollbar-width只接受auto、thin、none；设成12px或thick会被静默忽略，回退为auto -
scrollbar-color格式固定为scrollbar-color: <thumb> <track>；顺序反了（如scrollbar-color: #eee #666）就完全不生效；第二个参数别用transparent，否则轨道视觉消失，用户找不到拖拽位置 - 这两个属性不支持
border-radius、box-shadow、transition，也不响应:hover；所谓“定制”，仅限颜色和粗细两级
移动端 Safari 和 macOS 滚动条“看起来没变”
iOS/macOS Safari 对滚动条控制能力极弱，很多你以为能生效的写法其实被系统策略覆盖了：
立即学习“前端免费学习笔记（深入）”；
- Safari 16.4+ 才开始有限支持
scrollbar-width和scrollbar-color，但依然不认任何::-webkit-scrollbar规则；::-webkit-scrollbar-thumb:hover、:active等交互伪类基本不触发 - macOS 系统设置中若开启「自动隐藏滚动条」，所有 CSS 设置（包括
scrollbar-width: thin）都会被无视；这是系统级策略，前端无法绕过 - 别给
::-webkit-scrollbar-thumb设border-radius: 6px却只配width: 8px——圆角值不能超过宽高一半，否则滑块边缘错位、锯齿明显 - 如果设计稿明确要求圆角 + 悬停变色 + 全平台一致，
::-webkit-scrollbar+scrollbar-color组合已到极限；真要可靠实现，得换 JS 方案（如 simplebar），用绝对定位重绘滚动条
局部容器自定义滚动条时内容溢出失效
常见现象：容器加了 overflow-y: auto 和自定义滚动条，但内容就是不滚动——问题往往出在布局计算上：
- Flex 或 Grid 容器中，
align-items: stretch会让子项被拉伸填满高度，导致“内容未真实溢出”，滚动不触发；可改用align-items: flex-start或给子项加flex-shrink: 0 - 父容器没设固定
height或max-height，只靠overflow不足以创建滚动上下文；必须同时满足：尺寸约束 + 溢出声明 + 内容真实超出 - 使用
overflow: overlay？别用，该值已被废弃，现代浏览器不支持，写了等于白写 - 想让滚动条只作用于某个区域，关键不是“选中滚动条”，而是“锁定容器”：CSS 规则必须带作用域前缀，例如
.data-table::-webkit-scrollbar { width: 8px; }，而不是全局写::-webkit-scrollbar
最常被忽略的一点：滚动条是否显示，取决于内容是否真实溢出，而不是 CSS 是否写全。调试时先确认容器高度、子元素高度、是否被 flex/grid 拉伸——这些底层布局问题，比样式本身更容易导致整个自定义逻辑失效。
