现象:window.addEventListener监听touch无效,划不动屏幕,但是代码逻辑都有执行到。
scrollIntoView也无效。

原因:这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作,从而会影响到touch监听
解决:
- 将 touch-action: none 改为 touch-action: pan-y,允许垂直方向的滑动
- 添加了passive: false 触摸事件阻止其它交互动作得覆盖
- 增加了滑动阈值(50px)来减少误触
- 在每次滑动后更新起始位置,使连续滑动更流畅
javascript
// 添加触摸事件支持
window.addEventListener('touchstart', (e) => {
}, { passive: true });
window.addEventListener('touchmove', (e) => {
}, { passive: false });
window.addEventListener('touchend', () => {
}, false );
.container {
touch-action: pan-y;
}