虚拟滚动在iOS移动端存在兼容性问题，主因是WebKit异步提交策略导致scroll事件在惯性滚动中延迟或不触发；需添加-webkit-overflow-scrolling: touch、合理设置容器尺寸与阈值，并结合touchmove监听和requestAnimationFrame增强感知。
虚拟滚动在移动端确实存在兼容性问题，尤其在 iOS 上表现突出。核心矛盾在于：iOS 的原生滚动机制与虚拟滚动依赖的 scroll 事件触发逻辑不匹配——滚动过程中 scroll 事件常被节流或延迟触发，惯性滚动阶段甚至完全不触发，导致可视区域判断失准、内容错位或白屏。
iOS 惯性滚动不触发的根本原因
iOS WebKit 默认对非 body 元素的滚动采用“异步提交”策略：touch 结束后的动量滚动由系统独立处理，JavaScript 无法实时捕获中间位置变化，scroll 事件只在动量结束时触发一次。这直接导致虚拟滚动库（如 React Infinite、vue-virtual-scroller）无法及时更新渲染范围。
关键 CSS 修复：启用原生惯性支持
对启用虚拟滚动的容器，必须显式开启 WebKit 滚动加速：
- 添加
-webkit-overflow-scrolling: touch;—— 这是 iOS 7+ 启用平滑惯性滚动的必要条件 - 确保容器有明确的
height或max-height，且overflow-y: auto - 避免父级设置
transform、will-change或opacity < 1，这些会禁用硬件加速，间接抑制惯性
JavaScript 层补充方案
仅靠 CSS 不足以覆盖所有场景，需配合 JS 增强感知能力：
- 监听
touchmove事件，结合event.touches[0].clientY实时估算滚动偏移，用于预判可视区域 - 在
touchend后启动短时requestAnimationFrame循环，持续读取scrollTop直至稳定（适用于 React Infinite 等支持手动刷新的库） - 对 iOS 设备，将虚拟滚动的
threshold（缓冲区阈值）设为更高值（例如 2–3 倍容器高度），降低因事件丢失导致的渲染滞后风险
框架级适配建议
不同技术栈有对应优化路径：
-
React：使用
React Infinite时启用windowScroll模式（监听window.scrollY），绕过容器 scrollTop 的 iOS 限制 -
Vue 3：禁用可能干扰滚动链路的特性（如分页、sticky 表头），并确保虚拟滚动组件容器未被
v-show或display: none切换 -
通用：避免在 scroll/touch 处理函数中调用
getBoundingClientRect()或触发重排，改用offsetTop或缓存布局数据
