移动端禁止遮罩层以下屏幕滑动

当点击按钮之后,滑动弹窗,遮罩层以下的页面也会移动,这让体验很不好
解决方法:
解决思路1:
给body添加overflow:hidden属性即可,IE6、7下不会生效,需要给html增加overflow:hidden属性
在显示遮罩层点击事件里加上$("body,html").css({"overflow":"hidden"});关闭时恢复
解决思路2: 给遮罩层的阻止touchstart事件的默认事件

e.preventDefault();

解决思路3:打开遮罩层的时候,给遮罩层下面的页面添加fixed,页面就是固定的,没办法滑动了。(推荐)

$("body,html").css({"position":"fixed"});
posted @ 2017-09-23 16:08  joe_ice  阅读(294)  评论(0)    收藏  举报