滚动条样式需分浏览器适配：Chrome/Edge/Safari用::-webkit-scrollbar（水平条用height控制，注意track背景、thumb圆角限制及min-height）；Firefox仅支持scrollbar-width和scrollbar-color；iOS Safari完全忽略所有滚动条CSS；深色模式需重复整套伪元素规则。
::-webkit-scrollbar 只在 Chrome、Edge、Safari 里生效，Firefox 完全不认它；想让滚动条变好看，必须分浏览器写两套规则，否则火狐用户看到的还是系统原生灰条。
Chrome/Edge/Safari 怎么用 ::-webkit-scrollbar 控制水平滚动条
水平滚动条不是靠 width 控制粗细，而是靠 height —— 因为它是横向铺开的，视觉“厚度”由高度决定。只设 ::-webkit-scrollbar { height: 8px; width: 0; } 就能隐藏垂直条、只留水平条。
-
::-webkit-scrollbar-track必须显式设background，否则透明（尤其深色背景上会看不见） -
::-webkit-scrollbar-thumb的border-radius要 ≤height / 2，比如height: 6px就别设border-radius: 4px，不然圆角被裁掉 - 想让滑块常驻不隐藏？光设
opacity: 1不够，得保证min-height: 40px（WebKit 对小尺寸 thumb 有强制最小渲染高度） - 渐变背景失效？加
background-clip: content-box，再不行就换background-image: linear-gradient(...)
Firefox 滚动条只能靠 scrollbar-width 和 scrollbar-color
Firefox 不支持任何伪元素，::-moz-scrollbar 是废弃写法，写了也没用。能用的只有两个属性，且作用范围有限：
-
scrollbar-width: thin是唯一能让滚动条“倾向常驻”的开关，auto会退回到系统默认行为（macOS 下几乎不可见） -
scrollbar-color: #6c5ce7 #f0f0f0只控制 thumb 和 track 的主色，不支持圆角、阴影、渐变，也不能单独调 hover 状态 - 这两个属性必须写在
html或body上才影响整页滚动条；写在局部容器里无效 - 别指望它和 WebKit 效果一致——火狐下就是两块纯色条，接受这个事实比硬调更省时间
iOS Safari 完全忽略所有滚动条 CSS
无论你写多少 ::-webkit-scrollbar 或 scrollbar-color，iOS Safari（包括 iPadOS）统统当没看见。这不是兼容性问题，是苹果明确不支持。
- 测试时别用 macOS Safari 代替 iOS 测试，两者渲染差异极大
- 如果项目强依赖水平滚动交互（比如时间轴、宽表格），iOS 上建议用
overflow-x: scroll+-webkit-overflow-scrolling: touch（虽已废弃但仍有惯性效果） - 真要统一外观？JS 库如
simplebar是唯一解，但它会接管原生滚动逻辑，可能影响性能和可访问性
深色模式下滚动条颜色不切换怎么办
@media (prefers-color-scheme: dark) 不能直接包裹 ::-webkit-scrollbar 规则——伪元素不继承媒体查询上下文，必须重写整套样式。
立即学习“前端免费学习笔记（深入）”；
- 不要这样写：
@media (prefers-color-scheme: dark) { ::-webkit-scrollbar-thumb { background: #333; } }—— 大部分浏览器不支持 - 正确做法：把整套
::-webkit-scrollbar规则复制一遍，放在媒体查询内，并显式覆盖所有 color/background 值 - Firefox 的
scrollbar-color在深色模式下会自动响应系统主题，但仅限于auto或dark值，配色值（如#333 #111）不会随系统变 - 移动端无法监听
prefers-color-scheme动态切换滚动条，iOS Safari 更是连静态深色样式都不认
