Chrome/Edge用::-webkit-scrollbar系列伪元素定制，Firefox用scrollbar-width和scrollbar-color控制粗细与颜色，二者需分写且不可混用；Safari 16.4+仅支持scrollbar-width，忽略::-webkit-scrollbar。
Chrome/Firefox 中如何用 CSS 重置滚动条样式
现代浏览器（Chrome、Edge、Firefox 97+）支持通过伪元素自定义滚动条，但语法和兼容性差异大，直接套用容易失效。关键不是“全平台统一写法”，而是按浏览器分情况处理。
Webkit 内核（Chrome/Edge/Safari）用 ::-webkit-scrollbar 系列伪类；Firefox 则依赖 scrollbar-width 和 scrollbar-color 这两个 CSS 属性，不支持伪元素定制轨道或滑块细节。
- Chrome/Edge：必须用
::-webkit-scrollbar、::-webkit-scrollbar-track、::-webkit-scrollbar-thumb三者配合，缺一不可，否则可能完全隐藏滚动条 - Firefox：仅能控制粗细（
scrollbar-width: thin | auto | none）和颜色（scrollbar-color: thumb-color track-color），不能改圆角、阴影或尺寸 - Safari 16.4+ 开始支持
scrollbar-width，但依然不支持::-webkit-scrollbar—— 它会忽略该规则，不报错也不生效
/* Chrome/Edge/Safari（仅部分支持） */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 4px;
}
<p>/<em> Firefox + Safari 16.4+ </em>/</p><ul><li>{
scrollbar-width: thin;
scrollbar-color: #c1c1c1 #f1f1f1;
}为什么加了 ::-webkit-scrollbar 滚动条却消失了
最常见原因是只写了 ::-webkit-scrollbar-thumb，漏掉 ::-webkit-scrollbar-track 或 ::-webkit-scrollbar 自身。WebKit 要求至少定义 ::-webkit-scrollbar（设宽高）和 ::-webkit-scrollbar-thumb（设背景），否则可能渲染为空白。
立即学习“前端免费学习笔记（深入）”；
-
::-webkit-scrollbar必须设width（垂直滚动条）或height（水平滚动条），否则不触发样式计算 -
::-webkit-scrollbar-thumb必须有background，透明色（如rgba(0,0,0,0)）等于隐藏滑块 - 不要对
::-webkit-scrollbar-track设display: none或visibility: hidden，这会导致整个滚动条不可交互
想彻底隐藏滚动条但保留滚动功能，怎么写才安全
隐藏滚动条 ≠ 禁用滚动。目标是视觉上不可见，但 scrollTop、滚轮、触摸板仍正常工作。纯 CSS 方案在各浏览器中行为不一致，需组合使用。
- Chrome/Edge：用
::-webkit-scrollbar { width: 0 }最可靠；设width: 1px并配透明色容易被系统缩放放大而意外露出 - Firefox：必须用
scrollbar-width: none，仅靠::-webkit-规则无效 - 全局隐藏要加前缀：
* { scrollbar-width: none; }，但注意它会影响所有可滚动元素（包括<select>下拉框），必要时应限定选择器范围
* {
scrollbar-width: none; /* Firefox */
}
*::-webkit-scrollbar {
width: 0; /* Chrome/Edge */
}移动端（iOS/Android）能不能自定义滚动条
基本不能。iOS Safari 和 Android Chrome 均不支持任何滚动条样式 API。它们默认使用系统原生滚动指示器（淡入淡出的窄条），且不响应 ::-webkit-scrollbar 或 scrollbar-width。
少数例外：iPadOS 16.4+ 在桌面模式下（userAgent 含 Macintosh）会启用部分 Webkit 滚动条支持，但普通 Safari 移动版始终忽略。因此，所有「移动端滚动条美化」方案实际都是障眼法——比如用 JS 模拟滚动、覆盖一层假滑块，代价是失去惯性滚动、触控精度下降、内存占用上升。
真正跨端稳定的方案，是接受系统默认外观，仅通过 overscroll-behavior 控制回弹效果，或用 scroll-snap-type 提升滚动体验。强行覆盖滚动条，往往得不偿失。
