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

产生原因：

在 iOS 中，手指按住屏幕上下拖动，会触发 touchmove 事件。这个事件触发的对象是整个 webview 容器，
容器自然会被拖动，剩下的部分会成空白。
1
2

在 W3C 文档中说

touchmove 事件的速度是可以实现定义的，取决于硬件性能和其他实现细节
preventDefault 方法，阻止同一触点上所有默认行为，比如滚动。
1
2

解决方案:

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

具体实现代码（vue中）：

mounted(){
        document.body.addEventListener('touchmove', this.eventListenerHandle, {
            passive: false
        });
},
//页面离开时记得销毁监听事件
destroyed(){
     document.body.removeEventListener('touchmove',this.eventListenerHandle,{
            passive: false
     })
},
methods:{
         eventListenerHandle(e){
            if(e._isScroller) return;
            e.preventDefault();
         }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

注意：以上方法浏览器的自带的滚动也会被禁止 用better-scroll 实现的滚动不会被禁止。

方法原理：

//这个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 参数不能省略
1
2
3
4
5
6
7
8
9
10
11