ios系统在h5页面下拉上拉会带动整个webview 出现空白

w001yy

于 2022-07-11 15:42:27 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： ios javascript

本文链接：https://blog.csdn.net/w001yy/article/details/125722969

前端专栏收录该内容

16 篇文章

订阅专栏

这篇博客探讨了在iOS系统中，H5页面下拉上拉操作会引发webview空白的问题。问题源于touchmove事件触发整个webview容器的拖动。解决方案是通过监听touchmove事件，禁止不需要滑动的部分进行滑动。然而，单纯阻止默认行为可能导致内部滚动也被禁用。文中提供了两种处理方法，但都存在一定的局限性，需要根据实际需求进行选择和优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ios系统在h5页面下拉上拉会带动整个webview 出现空白
产生原因
在 iOS 中，手指按住屏幕上下拖动，会触发 touchmove 事件。这个事件触发的对象是整个 webview 容器，容器自然会被拖动，剩下的部分会成空白。

在 W3C 文档中说

touchmove 事件的速度是可以实现定义的，取决于硬件性能和其他实现细节

preventDefault 方法，阻止同一触点上所有默认行为，比如滚动。

解决方案
监听事件禁止滑动，通过监听 touchmove，让需要滑动的地方滑动，不需要滑动的地方禁止滑动。

//这个ios13以上没有效果
document.body.addEventListener('touchmove', function(evt) {
    if(!evt._isScroller) {
        evt.preventDefault();
    }
});
//这个会完全禁止touchmove  导致内部无法滚动。
document.body.addEventListener('touchmove', function (e) {
  if(e._isScroller) return; //过滤掉具有滚动容器的元素。
  e.preventDefault(); 
}, {passive: false}); //passive 参数不能省略