移动端,阻止弹出层下的页面滑动

1,188 阅读1分钟
最近写了一个小demo,有这样的一个功能,点击元素弹出弹窗,弹窗中的内容可以滚动,弹窗下的页面不能滑动。


功能挺简单,解决方案两种:

1、弹窗层弹出时,给body元素添加样式 height: 100%; overflow:hidden

2、使用阻止浏览器默认行为:

window.addEventListener("touchmove",function(event){ 
   event.preventDefault();
},{ passive:false });

不过这样倒是可以阻止弹出层下面的页面不在滑动,但是如果弹出层中有内容需要滑动的话,同时也会被禁止,所以在这里建议,如果弹出层里的内容需要滑动,那么可以在滑动的部分使用iScroll.js这个插件或者是其他能够实现滑动的插件。

对了,在这里要感谢盆友Yin,好久之前我需要实现这样的功能,使用了第二种方法,由于当时着急实现,并没有细想,想当然的把监听绑定到滑动的元素上了,结果功能非但没有实现,还报了一堆错误,后来在她提醒我下,反应过来并没有找对对象,滑动的对象应该是window,所以应该在window上绑定监听,哈哈哈哈哈,希望大家引以为诫,谢谢大家,写这个并没有大多技术含量的小功能,是为了记录并提醒自己不要再犯这种小错误,大家看看就好。