::-webkit-scrollbar在Firefox中无效，因其仅支持WebKit/Blink内核浏览器（Chrome、Edge、Safari），Firefox则使用scrollbar-width和scrollbar-color属性替代，且必须作用于html或body元素。
Chrome/Firefox/Edge 中 ::-webkit-scrollbar 为什么没效果
因为 ::-webkit-scrollbar 实际上只在基于 WebKit/Blink 的浏览器中生效（Chrome、Edge、Safari），Firefox 完全不支持——它用的是 scrollbar-width 和 scrollbar-color 这套独立 CSS 属性。所以如果你在 Firefox 里调 ::-webkit-scrollbar，它根本不会解析，自然没反应。
实操建议：
- 先确认目标浏览器：如果是 Chrome/Edge，放心用
::-webkit-scrollbar系列伪元素；如果是 Firefox，必须额外加scrollbar-width: thin | auto | none和scrollbar-color: - 别漏掉
::-webkit-scrollbar-track和::-webkit-scrollbar-thumb，只写::-webkit-scrollbar本身只会控制宽度，不定义外观 - 某些系统（如 macOS）默认隐藏滚动条，即使写了样式也可能“看不见”，可临时加
overflow: scroll强制显示来调试
::-webkit-scrollbar-thumb 圆角和颜色总不生效？
常见原因是缺少基础尺寸约束或层级被覆盖。这个伪元素默认没有背景色、没有最小尺寸，且受父容器 overflow 和 height/width 影响极大。
实操建议：
- 必须显式设置
background-color（或background），否则透明不可见 - 加
border-radius时，要配合足够大的min-height（垂直滚动条）或min-width（水平滚动条），否则圆角会被裁剪 - 避免用
opacity或半透色做 hover 效果——部分浏览器会直接忽略伪元素上的opacity，改用background-color的 rgba 值更可靠 - 如果 thumb 拖动卡顿或消失，检查是否父元素有
transform或will-change，这些可能触发合成层异常，临时去掉可验证
如何让自定义滚动条在移动端（iOS/Android）也工作
基本不能。iOS Safari 和 Android Chrome 对 ::-webkit-scrollbar 的支持极其有限：iOS 完全不支持任何自定义，Android 则只支持 ::-webkit-scrollbar（整体宽度），不支持 thumb 或 track 样式。
实操建议：
- 移动端请放弃深度定制，最多用
scrollbar-width: thin（Firefox for Android）或依赖系统原生样式 - 若强需统一视觉，考虑 JS 方案（如
simplebar或overlay-scrollbars），但要注意 touch 事件兼容性和性能损耗 - 不要在
@media (hover: none)下还堆砌::-webkit-scrollbar规则——白写，还增加 CSS 体积
兼容写法示例：一个能过大部分桌面端的最小可用块
下面这段可以直接复制进项目，覆盖 Chrome、Edge、新版 Safari，并为 Firefox 提供降级：
/* 全局滚动条宽度 */
* {
scrollbar-width: thin;
scrollbar-color: #6c6c6c #f1f1f1;
}
<p>/<em> WebKit/Blink 专属 </em>/
*::-webkit-scrollbar {
width: 8px;
}</p><p>*::-webkit-scrollbar-track {
background: #f1f1f1;
}</p><p>*::-webkit-scrollbar-thumb {
background-color: #6c6c6c;
border-radius: 4px;
min-height: 20px;
}</p><p>*::-webkit-scrollbar-thumb:hover {
background-color: #555;
}</p>
注意：全局通配符 * 会影响所有可滚动元素，如不想影响 或 ，请换成具体类名（如 .custom-scroll）并确保对应元素有 overflow: auto。
真正难的不是写几行 CSS，而是得随时记住：这东西既不是标准，也不跨平台，每次加之前都得问一句——这次用户到底用什么设备、什么浏览器打开。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
