最直接原因是未设置background导致滑块透明不可见；必须同时定义::-webkit-scrollbar（需设width/height）、::-webkit-scrollbar-track和::-webkit-scrollbar-thumb，且父容器要有真实滚动行为（overflow:auto/scroll且内容溢出）。
为什么写了 ::-webkit-scrollbar-thumb 却看不见滑块
最直接的原因是没写 background——这个属性不是可选，是刚需。不设就透明，拖不动也看不见。另外两个高频漏点：border-radius 超过滑块宽高一半（比如 width: 8px 却配 border-radius: 6px），视觉上会被裁掉；::-webkit-scrollbar 根本没设 width 或 height，整套伪类规则直接失效。
必须同时定义三者：::-webkit-scrollbar、::-webkit-scrollbar-track、::-webkit-scrollbar-thumb，缺一不可。而且父容器得有真实滚动行为：既要 overflow-y: auto（或 scroll），子内容高度还得真超出容器，否则浏览器压根不渲染这些伪元素。
::-webkit-scrollbar-track 和 ::-webkit-scrollbar-thumb 的尺寸与圆角怎么配
滑块形状靠 border-radius 控制，但不是越大越好：
- 矩形滑块：设
border-radius: 2px或0 - 胶囊形：取值接近滑块宽高的一半，比如
width: 10px就用border-radius: 5px - 圆角超限（如
width: 8px; border-radius: 6px）会导致边缘被裁，滑块“缩进”轨道里，看起来像断开
轨道的 border-radius 建议和滑块一致，否则视觉错位。别给轨道设 transparent 背景——Firefox 下虽不认这个伪类，但 WebKit 浏览器里轨道消失后，用户拖动时失去参照，体验极差。
Firefox 下 scrollbar-color 写反了会怎样
Firefox 只认固定顺序：scrollbar-color: <thumb><track></track></thumb>。写成 scrollbar-color: #f5f5f5 #6c63ff，结果是轨道变成 #f5f5f5，滑块反而是 #6c63ff——表面看全乱了，其实是顺序颠倒导致语义错配。
scrollbar-width 只接受三个值：auto、thin、none，没有像素级控制；它只对设置了 overflow 的块级元素生效，写在 html 或 body 上无效。Firefox 不支持 hover、圆角、阴影、渐变，所谓“定制”仅限颜色和粗细两级。
哪些地方容易误用导致全局污染或失效
别把自定义滚动条规则直接写在 html 或 body 上——会污染全站滚动条，尤其当页面含第三方组件（如 Ant Design 表格）时，它们可能自带重置样式，甚至显式设了 ::-webkit-scrollbar { display: none }，这时你得加 !important 才能覆盖（虽不优雅，但有时绕不开）。
移动端 Safari 部分支持，但 iOS 16+ 才稳定渲染 hover 状态；Android WebView 兼容性更碎片化。如果项目需强一致性，别硬扛原生伪类，用 SimpleBar 或 OverlayScrollbars 这类 JS 方案更可控——它们模拟滚动行为，样式完全由你掌控，且不依赖浏览器滚动条渲染机制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
