移动端滚动穿透事件

在开发移动端的时候发现一个问题,就是有弹框的时候滚动弹框的时候弹框下的页面也跟着滚动了,甚至是弹框不滚动下面的页面也会跟着滚动。

后来发现是没有处理滚动穿透的问题,当时做了两种方案:

方案一:

弹框出来之前给下面的页面设置overflow:hidden;(底部页面需要设置高度100%)这样就不会滚动了,关闭弹框的时候去掉这个样式就可以了。

但是感觉比较low,虽然也解决了问题,但是还是不够好。

方案二:

大部分的弹框都是小于或等于底部页面高度的,也就是说弹框正常不会有滚动事件的。

而这个滚动穿透好像是浏览器的默认事件,我们touchmove的时候去掉浏览器默认事件就ok了:

modal.addEventListener('touchmove', function(e) { e.preventDefault(); }, false);