最常见原因是未设置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，会导致轨道“消失”，但滑块还在，用户拖动时没参照物，体验极差。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
scrollbar-width只接受auto、thin、none三个值，没有像素级控制 - 它只对设置了
overflow的块级元素生效，写在html根上无效 - 不支持
:hover、圆角、阴影、渐变，所谓“定制”仅限颜色和粗细两级
Safari 上 ::-webkit-scrollbar-thumb:hover 为什么没反应
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）会让触控设备难操作，建议最小宽度 8px；颜色对比度低于 4.5:1 会影响视障用户识别，可用工具校验 background 和 track 的色值。
别用 visibility: hidden 或 opacity: 0 隐藏滚动条——这样内容仍可滚动，但键盘用户（Tab / 方向键）无法感知滚动区域，破坏焦点流。
- 隐藏滚动条但仍需滚动：用
overflow: scroll+::-webkit-scrollbar { width: 0 }（WebKit）+scrollbar-width: none（Firefox） - 所有伪元素必须成套出现：
::-webkit-scrollbar-track和::-webkit-scrollbar-thumb缺一不可，漏掉一个，整个链路回退到默认样式 - 移动端 Safari 兼容性极弱，别把它当作关键交互支撑，降级方案要提前设计好
getComputedStyle(element).overflowY 不是 auto 或 scroll，就什么都不会发生。 
