::-webkit-scrollbar在Firefox中无效，因其仅支持WebKit/Blink内核浏览器（Chrome、Edge、Safari），Firefox则使用scrollbar-width和scrollbar-color属性替代，且必须成对写在可滚动容器上并配合overflow生效。
Chrome/Firefox 中 ::-webkit-scrollbar 为什么没效果
因为 ::-webkit-scrollbar 仅在基于 WebKit/Blink 的浏览器（Chrome、Edge、Safari）中生效，Firefox 完全不支持该伪元素——直接写它却在 Firefox 里调试失败，是新手最常踩的坑。
实际项目若需跨浏览器一致表现，不能只靠 ::-webkit-scrollbar。Firefox 从 v64 起支持 scrollbar-width 和 scrollbar-color 这两个 CSS 属性，但它们只能控制宽窄和颜色，无法定制轨道/滑块形状或添加动画。
- Chrome/Edge/Safari：用
::-webkit-scrollbar系列伪类精细控制（::-webkit-scrollbar、::-webkit-scrollbar-track、::-webkit-scrollbar-thumb等） - Firefox：退而求其次，用
scrollbar-width: thin | auto | none+scrollbar-color: <thumb> <track> - 旧版 IE / Safari 15.4 之前：无原生支持，必须 JS 方案兜底
一行代码禁用默认滚动条并接管样式
很多教程漏掉关键一步：默认滚动条会“压”在自定义样式上，导致视觉错乱。必须先清除原生滚动行为，再注入新样式。
对目标容器（比如 <div class="custom-scroll">）加这一段：
立即学习“前端免费学习笔记（深入）”；
.custom-scroll {
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #6c6c6c #f5f5f5;
}
.custom-scroll::-webkit-scrollbar {
width: 8px;
}
.custom-scroll::-webkit-scrollbar-track {
background: #f5f5f5;
border-radius: 4px;
}
.custom-scroll::-webkit-scrollbar-thumb {
background: #6c6c6c;
border-radius: 4px;
}
.custom-scroll::-webkit-scrollbar-thumb:hover {
background: #555;
}
注意：scrollbar-width 和 scrollbar-color 必须写在 ::-webkit-scrollbar 规则之前，否则 Firefox 可能忽略；overflow-y: auto 是触发滚动的前提，不能省略。
移动端 Safari 滚动条根本不会显示，怎么办
iOS Safari 默认隐藏滚动条，且不响应 ::-webkit-scrollbar 样式（即使写了也看不到）。这不是 bug，是苹果的 UX 设计决策——用户需要滚动时才短暂浮现，且不可定制。
如果你真要“看到”滚动条（例如做教学演示或调试），唯一可靠方式是用 JS 模拟一个浮动层：
- 监听
scroll事件，计算scrollTop / scrollHeight得到滚动比例 - 动态更新一个绝对定位的
<div class="fake-scrollbar">的height和top - 配合
pointer-events: none避免遮挡内容
但请注意：这种模拟条不具备交互能力（点不了、拖不了），纯属视觉反馈。真实交互仍依赖系统原生滚动。
用 overflow: overlay 能简化实现吗
不能。CSS overflow: overlay 曾是 Chrome 早期实验性属性，用于让滚动条不占布局空间，但早在 Chrome 45 就已被移除，现在所有主流浏览器都不支持。写上去等于无效声明。
目前真正可行的“不占位”方案只有两种：
- CSS：用
padding-right预留空间 +overflow-y: scroll强制显示（稳定但有空白） - JS：监听
scrollbarWidth（通过创建临时元素测出宽度），动态调整padding-right（更精准但需额外逻辑）
别被过时文档误导——查 MDN 或 caniuse，overflow: overlay 已标为“废弃”。
真正复杂的点在于：没有银弹。跨浏览器滚动条定制本质是妥协的艺术——WebKit 下可炫技，Firefox 下保基本色，iOS 下只看不碰。选哪条路，取决于你的兼容性底线和设计容忍度。
