最常见原因是伪元素未成套出现：漏写::-webkit-scrollbar-track或::-webkit-scrollbar-thumb会导致整套失效；Firefox仅支持html/body上的scrollbar-width和scrollbar-color。
为什么::-webkit-scrollbar写了却没反应
最常见原因是伪元素没“成套出现”：漏掉 ::-webkit-scrollbar-track 或 ::-webkit-scrollbar-thumb，Chrome/Edge 就直接放弃自定义，回退到系统默认样式。不是“部分生效”，而是整套失效。
另一个高频错误是写在 html 或 body 上指望全局控制——浏览器只对设置了 overflow: auto 或 scroll 且内容真实溢出的**块级容器**渲染这些伪元素。想改某个列表区域？必须写成 .list-container::-webkit-scrollbar。
-
::-webkit-scrollbar必须设width（垂直）或height（水平），不设就等于没写 - 父容器没设
overflow-y: auto（或scroll）且子内容高度未真正超出，伪元素压根不生成 - 某些 UI 框架（如 Ant Design）或 CSS 重置会加
::-webkit-scrollbar { display: none }，得用!important覆盖
Firefox 滚动条怎么配才有效
Firefox 完全无视所有 ::-webkit- 开头的伪类，只认两个属性：scrollbar-width 和 scrollbar-color，而且它们**只能写在 html 或 body 上才生效**，写在子容器里等于白写。
scrollbar-width 只接受 auto、thin、none 三个值，没有像素控制；scrollbar-color 格式严格固定为 scrollbar-color: <thumb> <track>，顺序反了（比如写成 #f0f0f0 #6c5ce7）会导致滑块变灰、轨道反而是你指定的颜色——看起来像全乱了。
立即学习“前端免费学习笔记（深入）”；
-
scrollbar-width: thin是让滑块常驻的前提，auto下 macOS 用户几乎看不到滚动条 -
scrollbar-color的第二个参数（轨道色）别设transparent，否则轨道“消失”，只剩滑块悬在那儿，拖动时完全没参照 - 不支持
:hover、圆角、阴影、渐变，纯色就是它的全部能力
Safari 和 iOS 上的现实约束
iOS Safari 直到 16.4+ 才开始有限支持 ::-webkit-scrollbar，且仅限 thumb 和 track，::-webkit-scrollbar-button 和 ::-webkit-scrollbar-corner 基本被忽略。:hover 和 :active 在多数版本中也不触发，加了动画（transition）也白搭。
macOS Safari 对 scrollbar-width: thin 的支持极不稳定，实测多数版本直接当 auto 处理；想靠 CSS 在 Safari 实现圆角 + 悬停变色 + 稳定响应？基本做不到。
- 不要把 macOS Safari 测试结果当作 iOS Safari 的参考，两者渲染差异极大
- 如果项目强依赖水平滚动（如宽表格、时间轴），可保留已废弃但仍有惯性效果的
-webkit-overflow-scrolling: touch - 真要跨平台统一外观，JS 库（如 simplebar）是唯一可靠路径，但它会接管原生滚动逻辑，可能影响性能和可访问性
局部滚动容器的样式隔离要点
给 .chat-panel 或 .table-wrapper 这类局部容器加自定义滚动条，核心是「限定作用域」+「强制触发滚动行为」。
先确保容器有明确尺寸和溢出声明，例如：.chat-panel { height: 500px; overflow-y: auto; }；再把所有伪类选择器都带上这个前缀，比如 .chat-panel::-webkit-scrollbar。这样不会污染其他区域，也避免被全局重置规则覆盖。
-
::-webkit-scrollbar-thumb的background是刚需，不写就是透明，拖不动也看不见 -
border-radius别超过滑块宽高的一半（如height: 6px时，border-radius: 4px会被裁切） - 深色模式下不能靠
@media (prefers-color-scheme: dark)包一层就完事，得分别写两套规则并绑定到容器类名上 - 滑块太小（如
width: 4px）会让触控设备难操作，建议最小保持8px
