移动端::-webkit-scrollbar基本无效，因iOS Safari 16.4前完全忽略、Android Chrome/WebView普遍不支持，仅macOS Safari 15.4+和Chrome/Edge 90+等桌面WebKit浏览器稳定可用。
移动端 ::-webkit-scrollbar 为什么根本不起作用
因为绝大多数真实设备压根不实现这个伪元素：iOS Safari 在 16.4 版本之前完全忽略它；Android 上的 Chrome 和 WebView（包括大部分混合 App 内嵌环境）也基本不支持，哪怕你写了 ::-webkit-scrollbar-thumb 并加了 -webkit-appearance: none，样式也不会渲染。
常见错误现象包括：overflow: auto 滚动正常，但滚动条外观毫无变化；DevTools 里能看到伪元素被识别、样式被计算，真机上却空白一片；iOS 模拟器显示正常，一上真机就失效。
即使在 iOS 16.4+，支持也极有限：仅对 <div> 类容器有效，<body>、<textarea>、scroll-view 组件等多数场景仍不生效；且 thumb 有硬性最小尺寸（通常 ≥ 20px），小高度容器里直接消失。
哪些平台真正支持 ::-webkit-scrollbar
只有明确基于 WebKit 内核、且版本较新的桌面或系统浏览器才稳定可用：
立即学习“前端免费学习笔记（深入）”；
- macOS Safari（15.4+ 稳定支持）
- Chrome / Edge（Windows/macOS，90+ 版本）
- iOS Safari（16.4+，仅部分容器，无保障）
Firefox 完全不识别该伪元素，scrollbar-width 和 scrollbar-color 是它自己的替代方案，和 WebKit 无关；IE/Edge Legacy 已淘汰，无需考虑。
如果你的项目目标含 Firefox、Android WebView、旧版 iOS 或 UniApp/H5 混合容器，别把时间花在调试 ::-webkit-scrollbar-track 上——它不会生效，不是你写错了。
为什么检查了 overflow 还是没滚动条
伪元素不出现，往往不是浏览器不支持，而是滚动根本没触发。最常踩的坑是容器不具备“可滚动条件”：
- 父级没设
height或max-height，子元素靠flex: 1帆布式撑开，导致overflow不生效 - 子内容高度未超过容器可视区域，
scrollHeight ≤ clientHeight，自然不产生滚动 - CSS 重置库（如 Normalize.css）或 UI 框架（如 Ant Design）主动设置了
::-webkit-scrollbar { display: none !important }，得用更高优先级覆盖（虽不推荐） - 用
getComputedStyle(element).overflowY检查返回值，如果不是auto或scroll，伪元素连创建机会都没有
替代方案必须绕过原生滚动条
想在移动端统一控制滚动条外观，唯一可靠路径是禁用原生滚动行为，自己画一个“假滚动条”并同步位置：
- 先用
overscroll-behavior: contain防止弹窗滚动到底部时触发背景页滚动 - 容器设
position: relative，内部绝对定位一个<div class="scrollbar-thumb"> - 监听
scroll事件，用scrollTop / (scrollHeight - clientHeight)计算比例，再映射为 thumb 的top或transform - 注意：移动端
clientHeight易受缩放、字体加载、动态插入内容影响而抖动，建议加防抖或取整处理
这个比例计算看似简单，却是自定义滚动条在 iOS/Android 上偏移、卡顿、跳变的根源——它不是 CSS 层面的问题，而是 JS 同步时机与渲染管线错位造成的，必须实测真机反馈，不能只看模拟器。
