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 参数不能省略

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM