最常见原因是未设置background导致滑块透明不可见；必须同时定义::-webkit-scrollbar、::-webkit-scrollbar-track和::-webkit-scrollbar-thumb，且父容器需有真实滚动行为（overflow: auto/scroll且内容溢出）。
为什么写了 ::-webkit-scrollbar-thumb 却看不见滑块
最常见原因是没设 background——这个属性是刚需，不写就是透明，拖不动也看不见。另外，border-radius 不能超过滑块宽高的一半，比如 width: 8px 却写 border-radius: 6px，视觉上会“错位”甚至被裁掉。
必须确保父容器有真实滚动行为：overflow-y: auto 或 scroll，且子内容高度真超出容器；否则伪元素压根不渲染。
-
::-webkit-scrollbar必须先设width（垂直）或height（水平），否则整套规则失效 - 别直接写在
html或body上——会污染全站，应限定到具体容器如.list-container - 某些 UI 框架（如 Ant Design）或重置 CSS 会把
::-webkit-scrollbar设为display: none，得用!important覆盖（虽不优雅，但有时绕不开）
Firefox 下 scrollbar-color 写反了就完全无效
Firefox 只认 scrollbar-color: <thumb> <track> 这个固定顺序，写成 scrollbar-color: #f5f5f5 #6c63ff 就是轨道色在前、滑块色在后，结果滑块变默认灰，轨道反而是你指定的颜色——看起来像“全乱了”。
第二个参数（轨道色）千万别设 transparent，会导致轨道“消失”，但滑块还在，用户拖动时没参照物，体验极差。
立即学习“前端免费学习笔记（深入）”；
-
scrollbar-width只接受auto、thin、none三个值，没有像素级控制 - 它只对设置了
overflow的块级元素生效，写在html根上无效 - 不支持
:hover、圆角、阴影、渐变，所谓“定制”仅限颜色和粗细两级
::-webkit-scrollbar-thumb:hover 在 Safari 上没反应怎么办
iOS Safari 直到 16.4+ 才开始有限支持 ::-webkit-scrollbar，macOS Safari 对 ::-webkit-scrollbar-button 和 ::-webkit-scrollbar-corner 基本忽略，且 :active 和 :hover 伪类多数版本不触发。
不要依赖 scrollbar-width: thin 在 Safari 上生效——实测多数版本直接当 auto 处理，滚动条还是宽的。
- 给
::-webkit-scrollbar-thumb加transition动画？Safari 不支持，写了也白写 - 想在 Safari 实现圆角 + 悬停变色 + 稳定响应？唯一可靠路径是 JS 库（如
simplebar），用绝对定位重绘滚动条 - 深色模式下不能靠
@media (prefers-color-scheme: dark)直接套在外面，得分别写两套规则并绑定到容器类名上
滑块太小导致触控难操作，怎么避免
滑块太小（比如 width: 4px）会让触控设备难操作。WebKit 对小尺寸 thumb 有硬性渲染下限，光设 opacity: 1 不够，得保证 min-height: 40px 才能常驻显示。
渐变背景失效？加 background-clip: content-box；还不行就换 background-image: linear-gradient()。
- 想局部生效（比如只改某个
.table-container）？写成.table-container::-webkit-scrollbar，别漏掉选择器前缀 - 避免自定义滚动条破坏可访问性：滑块最小宽度建议 ≥ 8px，深色背景下注意对比度
- 移动端需额外测试：iOS Safari 对隐藏滚动条支持不稳定，部分版本下
scrollbar-width: none会被忽略
overflow 没生效、或者框架劫持了滚动逻辑，所有伪元素都只是摆设。 
