防止微信H5下拉出现域名究极解决方案(防止微信H5整体下滑)

410 阅读1分钟

背景:最近在微官网项目时,有一个优化问题,需要阻止微信H5页面下滑时背景出现域名,在网上查到的解决方法大多数是直接阻止掉touchmove的默认事件,如下:

document.addEventListener('touchmove', function (evt) { evt.preventDefault() }, { passive: false })

这样确实阻止掉了touchmove的默认事件,但如果页面中有元素需要滚动,而这个滚动又是基于overflow属性进行设置的,那这个滚动同样也就不能触发了。

然后呢,又在网上一通搜索,发现可以针对性的对元素阻止touchmove默认事件,

如下:详见代片段js部分

以上方法可行,很不错,但对于一个已经成型的项目,且有大量元素使用overflow进行滚动的项目来说,要去进行一一排查,工作量无疑是大的,且有可能会有遗漏的元素。

因此,我再以上的基础上,对这个方法进行了完善。详见代片段js部分

初次渲染时第一次滑动可能会滑不了,想要第一次便能滑动,可以针对要滑动的元素使用overscroll方法