原生滚动条无法统一美化，必须分浏览器实现：WebKit（Chrome/Edge/Safari）用::-webkit-scrollbar系列伪元素，Firefox仅支持scrollbar-width和scrollbar-color且须作用于html/body，iOS Safari完全不支持任何CSS滚动条样式。
原生滚动条没法“统一美化”，必须分浏览器写两套规则：WebKit 系统（Chrome/Edge/Safari）用 ::-webkit-scrollbar，Firefox 用 scrollbar-width 和 scrollbar-color，iOS Safari 则完全不支持任何 CSS 滚动条样式。
Chrome/Edge/Safari 怎么用 ::-webkit-scrollbar 控制水平滚动条
水平滚动条的“粗细”由 height 决定，不是 width；垂直滚动条才用 width。想只显示水平条、隐藏垂直条，得这么写：
-
::-webkit-scrollbar { height: 8px; width: 0; }——width: 0隐藏垂直条，height: 8px定义水平条视觉厚度 -
::-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 完全无视 ::-webkit-scrollbar，连 ::-moz-scrollbar 都是废弃写法。能用的只有两个属性，且必须写在 html 或 body 上才影响整页：
-
scrollbar-width: thin是唯一能让滚动条“倾向常驻”的开关；auto会退回到系统默认行为（macOS 下几乎不可见） -
scrollbar-color: #6c5ce7 #f0f0f0只控制 thumb 和 track 的主色，不支持圆角、阴影、hover 状态，也不能单独调 hover 效果 - 这两个属性写在局部容器（比如
.list）里无效——它不继承，也不作用于子滚动容器
为什么你的滚动条样式不生效
常见原因不是代码写错，而是触发条件没满足：
立即学习“前端免费学习笔记（深入）”；
- 滚动条只在内容实际溢出时才渲染，
overflow: auto但内容没超限 → 样式压根不会被解析 - 目标容器没设
height或max-height→ 浏览器认为无需滚动，滚动条不出现 - 父容器设了
overflow: hidden→ 直接裁掉子元素的滚动条，样式再全也没用 - 写了
::-webkit-scrollbar却在 Firefox 或 iOS Safari 上测试 → 它们根本不认，也不会报错，只是静默忽略 - 用了
padding或border却没预留滚动条空间 → 内容被遮挡，或出现意外的二次滚动
iOS Safari 完全忽略所有滚动条 CSS
这不是兼容性问题，是苹果明确不支持。无论你写多少 ::-webkit-scrollbar 或 scrollbar-color，iOS Safari（含 iPadOS）统统当没看见。
测试时别用 macOS Safari 代替 iOS 测试——两者渲染差异极大。如果项目强依赖水平滚动交互（比如时间轴、宽表格），iOS 上建议用 overflow-x: scroll + -webkit-overflow-scrolling: touch（虽已废弃但仍有惯性效果）。真要统一外观？JS 库如 simplebar 是唯一解，但它会接管原生滚动逻辑，可能影响性能和可访问性。
最易被忽略的一点：深色模式下，你得为 WebKit 和 Firefox 分别重写一整套规则——伪元素和 scrollbar-color 都不自动响应 @media (prefers-color-scheme: dark)，必须手动覆盖。
