Chrome/Edge需成套使用::-webkit-scrollbar系列伪元素，单独写::-webkit-scrollbar-thumb无效；Firefox仅支持scrollbar-width和scrollbar-color，且必须作用于有overflow的块级元素；iOS Safari基本不支持CSS自定义滚动条。
Chrome/Edge 里必须成套写 ::-webkit-scrollbar 系列
单独加 ::-webkit-scrollbar-thumb 没用，它依赖整套伪元素链生效。漏掉 ::-webkit-scrollbar-track 或没设 ::-webkit-scrollbar 的 width，样式大概率回退到系统默认。
-
::-webkit-scrollbar必须设width（垂直滚动）或height（水平滚动），常见值是8px～12px；不设就整个链失效 -
::-webkit-scrollbar-track建议配background和border-radius，但别加box-shadow——它不渲染 -
::-webkit-scrollbar-thumb的background是刚需，不设就是透明；border-radius别超宽高一半，比如滑块高6px，border-radius: 4px就会错位 - 悬停效果只能靠
::-webkit-scrollbar-thumb:hover单独写，对父容器加:hover没反应
Firefox 只认 scrollbar-width 和 scrollbar-color
它完全无视所有 ::-webkit- 开头的规则。这两个属性只作用于有 overflow 的块级元素（比如 .list-container），不能写在 html 或 body 上——否则无效。
-
scrollbar-width只有三个值：auto、thin、none；没有像素级控制，“thin” 是唯一可调的粗细选项 -
scrollbar-color格式固定为scrollbar-color: <thumb> <track>，顺序反了就无效；第二个参数设transparent会让轨道“消失”，但滑块还能拖——体验差，别这么干 - 这两个属性不支持圆角、阴影、渐变，也不响应
:hover；所谓“定制”，仅限颜色和粗细两级 -
scrollbar-color只在scrollbar-width是auto或thin时才生效；设成none，颜色直接被忽略
Safari（macOS/iOS）基本不能靠 CSS 控制
iOS Safari 16.4+ 才开始有限支持 scrollbar-width 和 scrollbar-color，但依然不支持 ::-webkit-scrollbar（尽管同属 WebKit 内核）。更麻烦的是：macOS 系统偏好里如果开了“自动隐藏滚动条”，CSS 设置会被系统级策略覆盖，网页无权干预。
- 别给 Safari 写
::-webkit-scrollbar-thumb:active——它不触发 - 避免依赖
scrollbar-width: thin在 Safari 上生效，实测多数版本直接当auto处理 -
::-webkit-scrollbar-corner和::-webkit-scrollbar-button在 macOS Safari 上基本被忽略 - 若需统一外观，Safari 下建议保持默认，或用
@supports (-webkit-appearance: none)做特性检测后降级
隐藏滚动条但保留滚动能力的跨浏览器写法
不是 overflow: hidden（那会裁剪内容），而是让视觉不可见但滚轮、键盘、触摸仍可用。
立即学习“前端免费学习笔记（深入）”；
- WebKit 方案：
.container::-webkit-scrollbar { display: none; }或width: 0；必须配合overflow-y: auto或scroll - Firefox 方案：
scrollbar-width: none;是唯一可靠方式；scrollbar-color: transparent transparent是兼容 fallback，但不如none彻底 - 移动端要额外测试：iOS Safari 对
scrollbar-width: none支持不稳定，部分版本下会被忽略 - 注意风险：
overscroll-behavior: contain或overflow: overlay（已废弃）可能干扰手势滚动，尤其在 macOS Safari 上
.content），而不是全局写在 html 或 body 上；一旦容器结构变化或父级劫持滚动，样式就失效。 
