chrome/safari/edge 用 ::-webkit-scrollbar 控制滚动条，垂直宽用 width、水平厚用 height；firefox 仅支持 scrollbar-width 和 scrollbar-color，且须写在 html 或 body；ios safari 完全忽略滚动条样式。
Chrome/Safari/Edge 怎么用 ::-webkit-scrollbar 控制滚动条粗细和圆角
垂直滚动条宽度由 width 控制，水平滚动条“厚度”必须用 height —— 不是笔误，这是 WebKit 的设计逻辑。设 ::-webkit-scrollbar { width: 0; height: 8px; } 就能隐藏垂直条、只留水平条。
::-webkit-scrollbar-thumb 的 border-radius 不能超过 height / 2（比如 height: 6px 时，border-radius: 4px 会被截断）；::-webkit-scrollbar-track 必须显式设 background，否则在深色背景上直接“消失”。
- 滑块常驻不隐藏？光
opacity: 1不够，得保证min-height: 40px（WebKit 对小尺寸 thumb 有硬性渲染下限） - 渐变背景失效？加
background-clip: content-box；还不行就换background-image: linear-gradient() - 想局部生效（比如只改某个
.table-container）？写成.table-container::-webkit-scrollbar，别漏掉选择器前缀
Firefox 滚动条为什么没反应？只认 scrollbar-width 和 scrollbar-color
::-moz-scrollbar 是废弃写法，写了也白写。Firefox 当前只支持两个声明，且**必须写在 html 或 body 上才全局生效**，写在子容器里完全无效。
scrollbar-width: thin 是唯一能让滚动条“倾向常驻”的开关；auto 下 macOS 用户几乎看不到条；none 则彻底隐藏（但内容仍可滚动）。
-
scrollbar-color: #6c5ce7 #f0f0f0只控制滑块色和轨道色，不支持 hover、圆角、阴影、渐变 - 别指望它和 Chrome 效果一致——火狐下就是两块纯色条，接受这个事实比硬调更省时间
- 深色模式切换？这两属性不响应
@media (prefers-color-scheme: dark)，得手动重复整套规则
iOS Safari 完全忽略所有滚动条 CSS，这不是 bug 是设计
无论你写多少 ::-webkit-scrollbar 或 scrollbar-color，iOS/iPadOS Safari 都当没看见。苹果明确不支持滚动条样式定制，测试时别用 macOS Safari 代替 iOS 测试——两者渲染差异极大。
如果项目强依赖水平滚动交互（比如时间轴、宽表格），建议用 overflow-x: scroll + 已废弃但仍有惯性效果的 -webkit-overflow-scrolling: touch。
- 真要统一外观？JS 库如
simplebar是唯一解，但它会接管原生滚动逻辑，可能影响性能和可访问性 - 移动端用户习惯用拖拽或手势滚动，滚动条本身可视性低，优先保障内容可滚动比强求样式更重要
深色模式下滚动条颜色不切换？伪元素规则得重写一遍
截至 2026 年 6 月，::-webkit-scrollbar 规则不会自动响应系统主题变化。你得手动为深色模式再写一套，且必须放在 @media (prefers-color-scheme: dark) 块里，不能靠 CSS 变量自动继承。
常见错误是只在根级写了一套浅色规则，然后以为 color-scheme: dark 能联动滚动条——它不能。轨道背景、滑块色、圆角值都得重新指定。
- 深色背景下，
::-webkit-scrollbar-track的background若没重设，容易变成不可见的纯黑 - 火狐的
scrollbar-color同样不响应媒体查询，深色模式下也得单独写一遍 - 复杂点在于：同一页面可能同时存在 light/dark 区域（比如暗色卡片+亮色弹窗），滚动条样式需按容器粒度控制，而非全局一刀切
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
