::-webkit-scrollbar 仅 Chrome、Edge（Windows/macOS）和 Safari（macOS）支持，Firefox 和 iOS/iPadOS Safari 完全不支持；必须配合 ::-webkit-scrollbar-thumb 和 ::-webkit-scrollbar-track 才生效，且无法影响滚动行为底层逻辑。
Chrome、Edge、Safari（仅 macOS）支持 ::-webkit-scrollbar，Firefox 和新版 Safari（iOS/iPadOS）完全不支持，所以它只适合“增强体验”，不能作为滚动功能依赖。
哪些浏览器能用 ::-webkit-scrollbar
只有基于 WebKit/Blink 内核的桌面浏览器部分支持：
- Chrome / Edge（Windows/macOS）：全支持
- Safari（macOS）：支持，但部分伪元素行为有差异（比如
::-webkit-scrollbar-track不响应background透明度） - Safari（iOS/iPadOS）：完全忽略 所有
::-webkit-scrollbar规则 - Firefox：无视全部，连语法都不解析
这意味着：你在 iOS 上测试时看到原生灰色细条，不是写错了，是它压根不读这行 CSS。
::-webkit-scrollbar 必须的三个组成部分
只写 ::-webkit-scrollbar 本身没用，它只是容器，真正起作用的是它的子伪元素。最简可用组合是：
立即学习“前端免费学习笔记（深入）”；
-
::-webkit-scrollbar：设置整体宽度/高度（横向滚动时控制高度） -
::-webkit-scrollbar-thumb：滑块本体，必须设background，否则不可见 -
::-webkit-scrollbar-track：轨道背景，可选，但建议设以避免默认样式干扰
示例：
div {
overflow-y: auto;
}
div::-webkit-scrollbar {
width: 8px; /* 垂直滚动条宽度 */
}
div::-webkit-scrollbar-thumb {
background-color: #6c757d;
border-radius: 4px;
}
div::-webkit-scrollbar-track {
background-color: #f1f1f1;
}注意：::-webkit-scrollbar-thumb:hover 可以加悬停效果，但 iOS 无 hover，别指望它在手机上生效。
移动端适配和替代方案提醒
如果你的页面要上微信、钉钉或 iOS Safari，::-webkit-scrollbar 样式会静默失效——没有报错，也不渲染。此时实际表现就是系统原生滚动条（iOS 是半透明细条，无法定制）。
- 不要用它来“修复”滚动卡顿，它不改变滚动性能
- 不要依赖它实现关键 UI 功能（比如靠滚动条宽度预留右侧 padding）
- 如需跨平台一致滚动体验，考虑 JS 方案（如
simplebar或overlay-scrollbars），但要注意 touch 行为、惯性滚动、键盘导航等兼容成本
真正容易被忽略的一点：即使在 Chrome 里，::-webkit-scrollbar 也无法修改滚动条的点击拖拽灵敏度、滚动加速曲线或键盘方向键步长——这些全是浏览器底层控制的，CSS 拿不到。
