使用jQuery滚动导致iOS Safari触摸手势失效问题咨询

• 系统滚动线程与JS线程的冲突
  iOS Safari的原生滚动由系统硬件加速线程独立处理，而jQuery的animate()是在JS主线程模拟滚动行为。当JS强行接管滚动并执行动画后，可能没有正确交还系统滚动的控制权，导致Safari的触摸事件识别逻辑进入异常状态——它会认为当前滚动是由JS主导的，直接拦截原生触摸手势，直到用户触发地址栏点击、双击这类系统级操作，才会重置滚动状态。

• scrollTop的异步状态偏差
  jQuery动画修改scrollTop时，是直接操作DOM的属性值，但iOS Safari会维护一份自己的滚动位置缓存。动画结束后，JS设置的scrollTop和系统缓存的位置没同步上，触摸手势触发时，系统判断滚动位置“不合法”，就会禁用手势输入，必须等系统重新校准位置才会恢复。

• 弹性滚动属性的兼容性bug
  如果你的滚动容器设置了-webkit-overflow-scrolling: touch来开启iOS弹性滚动，结合jQuery的JS驱动滚动，会触发Safari的已知问题：JS修改滚动位置会破坏容器的触摸事件绑定。动画结束后，容器的触摸监听没有自动恢复，自然就没法响应手势了。

快速验证思路 #

在jQuery滚动动画的complete回调里，手动触发一次滚动事件试试：

$('html, body').animate({scrollTop: targetTop}, 500, function() {
  window.dispatchEvent(new Event('scroll'));
});

如果触摸手势能恢复，就说明核心问题是系统滚动状态未同步。

内容的提问来源于stack exchange，提问作者JackKalish