移动端无法可靠使用 ::-webkit-scrollbar 实现自定义滚动条，因安卓 WebView 和 iOS Safari（iOS 16.4 前）根本未实现该伪元素，iOS 16.4+ 仅部分支持且对 body、textarea 等无效，Android Chrome 80+ 已逐步移除支持；替代方案是隐藏原生滚动条，用 CSS + JS 模拟滚动容器，通过 transform 控制位移、动态计算滑块高度、touch 事件结合 requestAnimationFrame 更新位置并添加惯性衰减，同时避免频繁读取 scrollTop 等触发布局抖动。
移动端无法可靠使用 ::-webkit-scrollbar 实现自定义滚动条——这不是写法问题，是浏览器根本不支持。
为什么 ::-webkit-scrollbar 在真机上完全失效
绝大多数安卓 WebView 和 iOS Safari（iOS 16.4 之前）压根没实现该伪元素；iOS 16.4+ 仅对部分 div 容器有极其有限的支持，body、textarea 等基本无效；Android Chrome 从 80 版本起已逐步移除支持。你写的 ::-webkit-scrollbar-track 和 ::-webkit-scrollbar-thumb 在真机上不会渲染，不是选择器错，是引擎没这功能。
- 常见错误现象：
overflow: scroll滚动正常，但自定义样式全无；DevTools 里能看到伪元素被识别，却无任何视觉反馈 - iOS 模拟器可能显示，但真机空白——别信模拟器
- 即使侥幸生效，
thumb有硬性最小尺寸限制（通常 ≥ 20px），小容器里直接消失
替代方案：用 CSS + JS 手动接管滚动行为
核心思路不是“美化原生滚动条”，而是隐藏它、画一个假的、再用 JS 同步位置和惯性。必须放弃 ::-webkit-scrollbar 思维，转向“模拟滚动容器”。
- 先禁用原生干扰：
element { overflow: hidden; scrollbar-width: none; -ms-overflow-style: none; } - 容器设
position: relative，内部用transform: translateY()滚动内容（避免触发布局重排） - 绝对定位的
<div class="scrollbar-thumb"> 模拟滑块，高度按 <code>clientHeight / scrollHeight比例计算 -
touchstart/touchmove中只读取touches[0].clientY，用requestAnimationFrame更新位置，避免卡顿 - 必须加惯性：记录速度，每帧衰减（如乘以 0.96），直到低于阈值才停止
- 滚动位置同步应单向：JS 控制内容位移 → 推算 thumb 位置，不要反向读取 thumb 位置去改
scrollTop - thumb 位置必须用
transform: translateY()更新，而非top或margin-top - 动态内容插入后，需防抖重新计算比例，避免连续触发 layout
- 慎用
touch-action: none：它会禁用双指缩放和部分手势，推荐touch-action: pan-y保底
容易踩的性能坑：scrollTop 和 clientHeight 别乱读
移动端频繁读取 element.scrollTop、scrollHeight 或 clientHeight 会强制同步布局（layout thrashing），尤其在低端 Android 机上明显卡顿。这些值还受缩放、字体渲染抖动影响，导致滚动条跳变。
立即学习“前端免费学习笔记（深入）”；
真正难的不是画出那个滑块，而是让它的拖动响应、惯性、边界吸附和视觉反馈在各种机型上都一致——这些细节不处理好，用户第一感觉就是“卡”或“不跟手”。
