::-webkit-scrollbar 在移动端基本无效，因 iOS Safari 16.4 前完全不支持、16.4+ 仅极少数容器有限支持且无拖动事件，Android Chrome/WebView 80+ 已移除；真机调试可见原生滚动正常但样式始终不可控，替代方案需视觉模拟+手动同步滚动与惯性衰减。
::-webkit-scrollbar 在移动端基本无效，别再为它写样式了。
为什么 ::-webkit-scrollbar 在真机上完全不生效
iOS Safari 16.4 之前完全不支持；16.4+ 仅对极少数 div 容器有极其有限的支持，且不触发 thumb 拖动事件。Android Chrome / WebView 80+ 已移除该伪元素实现。你看到的“生效”，大概率是桌面 Safari 或模拟器的错觉。
- 用
getComputedStyle(element)查不到scrollbar-width或任何相关计算值 → 浏览器压根没解析它 - DevTools Elements 面板里能看到伪元素节点，但 Computed 栏中无样式应用痕迹
- 真机调试时：
overflow: scroll正常滚动，但轨道/滑块始终是系统默认灰条、半透明条，或干脆不可见 - 加
-webkit-appearance: none或!important也改变不了底层不支持的事实
哪些场景下容易误判“它能用”
这些情况上线后立刻翻车，尤其在旧 iOS 或低端 Android 设备上：
- iOS 模拟器显示正常 → 真机（尤其是 iOS 15.x 或 iPad mini 4）滚动条全黑/消失
- Chrome DevTools 勾选 “Emulate touch events” → 实际触控滚动时
thumb卡顿、位置错乱、缩放后偏移 - 容器用了
transform: translateZ(0)或will-change: transform→ 某些 Android WebView 下::-webkit-scrollbar-thumb直接不渲染 - 动态插入内容后调用
element.scrollTop = 0→scrollHeight计算失准，字体加载延迟导致 clientHeight 抖动，比例崩坏
真正能落地的替代方案：视觉模拟 + 行为同步
放弃接管原生滚动条，转而用 DOM 元素模拟外观，并手动同步滚动位置和惯性衰减。
立即学习“前端免费学习笔记（深入）”；
- 容器设
overflow: hidden，禁用原生滚动条干扰 - 用
position: relative包裹内容区，再绝对定位一个<div class="scrollbar-thumb"> - 监听
touchstart/touchmove，用requestAnimationFrame更新transform: translateY()控制 thumb 位置，避免重排 - 滚动位置同步靠
scrollTop和scrollHeight - clientHeight计算比例，但必须加防抖：检查scrollHeight是否稳定（等图片、字体加载完成后再初始化） - 保留
touch-action: pan-y，既允许纵向滚动，又不阻断双指缩放等原生手势
最容易被忽略的关键点
移动端滚动不是“拖到哪停在哪”。原生滚动有惯性衰减逻辑，手指一抬就停会严重割裂体验——这不是样式问题，是交互契约的缺失。你必须自己补全 velocity tracking + easing 动画，否则用户会明显感觉“卡顿”或“不跟手”。截至 2026 年 7 月，还没有跨平台通用的轻量级 inertia 库能完美替代原生行为，得自己写或谨慎选用 smooth-scroll 类库并做真机验证。
