直接写::-webkit-scrollbar没反应，因其必须成套定义且仅作用于显式设置overflow的块级容器；需设width/height、track和thumb，缺一不可，且移动端Safari不支持:hover等交互。
改不了全局滚动条样式，只能按容器、按浏览器分别控制；溢出处理不是加个 overflow 就完事，得先明确是“内容裁剪”还是“触发滚动”，再配对设置宽高和伪元素。
为什么直接写 ::-webkit-scrollbar 没反应
因为这个伪元素必须成套出现，且只作用于有显式 overflow 的块级容器——写在 html 或 body 上会污染全站，写在没设尺寸的 div 上则因无溢出条件而根本不渲染。
-
::-webkit-scrollbar必须设width（垂直）或height（水平），不设就整个链失效 -
::-webkit-scrollbar-track和::-webkit-scrollbar-thumb至少各写一个，漏掉任一环节，浏览器大概率回退到默认样式 - 移动端 Safari 不触发
:hover，::-webkit-scrollbar-thumb:hover在 iOS 上无效 - 别给
::-webkit-scrollbar-thumb设border-radius: 6px却只配width: 8px——圆角值不能超过宽高一半，否则视觉错位
scrollbar-width 和 scrollbar-color 在 Firefox 中怎么用
Firefox 完全无视所有 ::-webkit- 开头的伪类，只认这两个属性，且仅对设置了 overflow: auto 或 scroll 的块级元素生效，不能写在 html 根上。
-
scrollbar-width只接受auto、thin、none三个值，没有像素级控制，“thin” 是最接近自定义的选项 -
scrollbar-color格式固定为scrollbar-color: <thumb> <track>，顺序反了就无效；第二个参数别设transparent，否则轨道“消失”，滑块悬浮位置难判断 - 这两个属性不支持
border-radius、box-shadow、transition，也不响应:hover - macOS 或 Windows 系统级“自动隐藏滚动条”开启时，
scrollbar-width: thin可能被无视
如何让自定义滚动条只作用于某个容器
关键不是“选中滚动条”，而是“限定作用域”：把所有 ::-webkit-scrollbar 相关规则加在容器类名后，同时确保该容器有固定尺寸和溢出声明。
立即学习“前端免费学习笔记（深入）”；
- HTML 结构必须是
<div class="custom-scroll">...</div>，不能是<section>之类语义标签直接套用（除非你显式加class） - CSS 写法必须带前缀：
.custom-scroll::-webkit-scrollbar { width: 8px; }，而不是::-webkit-scrollbar全局写法 - 容器需同时满足：
width或height固定 +overflow-y: auto（或scroll）+ 内容真实溢出（比如子元素高度 > 容器高度） - 如果容器用了
flex或grid布局，注意主轴方向是否阻断了溢出计算——常见坑是align-items: stretch导致子项被拉伸，实际未溢出
Safari 上滚动条样式为什么经常失效
Safari（尤其是 macOS）对滚动条控制能力极弱：16.4+ 才开始支持 scrollbar-width 和 scrollbar-color，但依然不支持 ::-webkit-scrollbar 的多数子伪类，且系统偏好设置可强制覆盖 CSS。
- iOS Safari 对
::-webkit-scrollbar-thumb:active完全不触发，:hover也无效 - macOS Safari 忽略
::-webkit-scrollbar-corner和::-webkit-scrollbar-button，即使写了也不渲染 - 不要依赖
@supports (-webkit-appearance: none)检测 Safari——它返回true但实际不支持大部分滚动条样式 - 若设计稿强制要求圆角+悬停变色+Safari 正常显示，唯一可靠路径是放弃原生滚动条，用
simplebar或overlay-scrollbars接管
最易被忽略的一点：滚动条是否显示，取决于内容是否真实溢出，而不是 CSS 是否写了 overflow。很多情况下容器尺寸计算受 flex/gird/transform 影响，导致看似溢出实则未触发，此时所有滚动条样式都白搭。
