移动端::webkit-scrollbar基本无效，iOS Safari 16.4前完全不支持、16.4+仅部分支持，Android Chrome/WebView 80+已逐步移除；所谓“生效”多为模拟器或桌面端错觉，真机中滚动条始终为系统默认或不可见，应改用视觉模拟+行为同步方案。
移动端用 ::-webkit-scrollbar 基本无效，别白费力气写样式了。 iOS Safari 在 16.4 之前完全不支持，16.4+ 仅对部分 div 容器有极其有限的支持；Android Chrome / WebView 从 80+ 版本起已逐步移除该伪元素实现。你看到的“生效”，大概率是模拟器或桌面 Safari 的错觉。
为什么写了 ::-webkit-scrollbar 却没反应
不是选择器写错了，而是浏览器压根没解析它：
-
getComputedStyle(element)查不到scrollbar-width或相关伪元素计算值，说明未被识别 - DevTools 的 Elements 面板里能看到伪元素节点，但 Computed 栏中无样式应用痕迹
- 真机调试时，
overflow: scroll滚动正常，但轨道/滑块始终是系统默认灰条或干脆不可见 - 即使加了
-webkit-appearance: none或!important，也改变不了底层不支持的事实
哪些场景下它“看似能用”但实际危险
这些情况容易让人误判兼容性，上线后立刻翻车：
- iOS 模拟器显示正常 → 真机（尤其是 iOS 15.x 或旧款 iPad）全黑/消失
- Android Chrome 开发者工具勾选 “Emulate touch events” → 实际真机触控滚动时滑块卡顿、位置错乱
- 容器用了
transform: translateZ(0)或will-change: transform→ 某些 Android WebView 下::-webkit-scrollbar-thumb直接不渲染 - 动态插入内容后调用
element.scrollTop = 0→ 滑块高度计算失准，缩放或字体加载延迟导致clientHeight抖动，比值崩坏
真正能在移动端落地的替代方案
放弃接管原生滚动条，转为「视觉模拟 + 行为同步」：
立即学习“前端免费学习笔记（深入）”；
- 容器设
overflow: hidden，禁用原生滚动条干扰 - 用
position: relative包裹内容区，再绝对定位一个<div class="scrollbar-thumb"> - 监听
touchstart/touchmove，用requestAnimationFrame更新transform: translateY()控制 thumb 位置，避免重排 - 滚动位置同步靠
scrollTop和(scrollHeight - clientHeight)计算比例，但必须加防抖：检查scrollHeight是否稳定（内容加载完成后再初始化） - 保留
touch-action: pan-y，既允许纵向滚动，又不阻断双指缩放等原生手势
最易被忽略的一点：移动端滚动不是“拖到哪停在哪”，惯性衰减逻辑必须自己补全。否则手指一抬就停，和原生体验割裂感极强——这不是样式问题，是交互契约的缺失。
