chrome/edge 中需用 ::-webkit-scrollbar-thumb 显式设置 background-color 和 border-radius 实现滑块样式，firefox 不支持该伪元素，ios safari 仅部分支持且 background-color 无效。
Chrome / Edge 中用 ::-webkit-scrollbar-thumb 设置滑块颜色和圆角
主流 Chromium 内核浏览器（Chrome、Edge、新版 Opera）支持 ::-webkit-scrollbar 系列伪元素，其中 ::-webkit-scrollbar-thumb 专用于控制滑块本身。它不继承父容器样式，必须显式设置 background-color，否则默认透明——这是最常见的“改了没反应”原因。
实操要点：
-
background-color必须设，哪怕只是#aaa；仅设border-radius不会生效 - 滑块高度/宽度由浏览器自动计算，无法用
height/width覆盖，但可用min-height（垂直滚动条）或min-width（水平滚动条）约束最小尺寸 -
border-radius: 8px可直接生效，但若滑块太窄（比如只有 6px 高），圆角会被裁剪，建议搭配min-height: 12px - 支持
background-image（如线性渐变），但不支持box-shadow
::-webkit-scrollbar-thumb {
background-color: #6c757d;
border-radius: 8px;
min-height: 12px;
}
Firefox 中无法用伪元素定制滑块，需换思路
Firefox 完全不支持 ::-webkit-scrollbar，也没有对应的原生伪元素替代方案。想在 Firefox 里实现类似效果，只能放弃原生滚动条，改用 JavaScript 滚动库（如 simplebar 或 overlay-scrollbars），或者用 overflow: hidden + 自定义容器 + 手动监听 scroll 事件模拟滚动——但后者成本高、易出兼容问题。
简单判断：如果项目必须同时支持 Chrome 和 Firefox，且设计稿对滑块样式有硬性要求，::-webkit-scrollbar 方案实际只覆盖部分用户，得提前跟产品确认接受度。
::-webkit-scrollbar-track 和 ::-webkit-scrollbar 的作用边界
::-webkit-scrollbar 是整个滚动条容器，设 width/height 控制滚动条粗细；::-webkit-scrollbar-track 是滑轨（即滑块拖动的底板），常用来设背景色或隐藏（background: transparent）。但注意：track 不是必须存在的——如果没设，浏览器会用默认灰色底；设了也只影响底板，不影响滑块本身。
常见误操作：
- 给
::-webkit-scrollbar-track设border-radius，以为能“带动”滑块变圆角 → 实际无效，滑块圆角只认::-webkit-scrollbar-thumb - 把
::-webkit-scrollbar的width设得太小（如4px），导致滑块无法点击或拖动卡顿 → 建议不低于8px - 在
::-webkit-scrollbar上设background，期望填满整个滚动区域 → 它只控制滚动条自身宽高，不渲染背景
移动端 Safari 和旧版 iOS WebKit 的兼容细节
iOS 16.4+ 开始，Safari 支持 ::-webkit-scrollbar，但仅限于某些特定容器（如 overflow: scroll 的 <div>），对 <code> 或 根滚动条无效。而且滑块始终是半透明浅灰，::-webkit-scrollbar-thumb 的 background-color 会被忽略，只保留 border-radius 和 background-image（如果支持）。
这意味着：在 iOS 上，你能做的最多是让滑块“看起来更圆润”，但无法真正改变它的颜色或不透明度。如果设计依赖鲜明色块，得考虑降级为无样式原生滚动条，或引导用户使用桌面端。
滑块交互反馈弱、视觉权重低，是移动端 Web 滚动条定制最不可控的一环。别花时间调试 iOS 上的 background-color，它不会生效。
