如何显示遮罩层时禁止底层页面滑动

前端面试秘籍,欢迎star!在touchmove时禁用浏览器默认事件，

document.addEventListener('touchmove', function (event) {event.preventDefault();})

我只需要在遮罩弹出时禁用，遮罩关闭时释放，于是我改了下代码：

var aBtn=$('#a1');      //点击按钮
var guide=$('.guide');  //弹出的遮罩层
var flag=0; 　　　　　　  //标识，初始为0
aBtn.tap(function() {guide.css('display', 'block');  //显示遮罩flag=1;});
document.addEventListener('touchmove', function (event) { 　　 //监听滚动事件if(flag==1){　　　　　　　　　　　　　　　　　　　　　　　　　　　　//判断是遮罩显示时执行，禁止滚屏event.preventDefault();　　　　　　　　　　　　　　　　　　　//最关键的一句，禁止浏览器默认行为}
})
guide.tap(function(){guide.css('display','none'); 　　　　//隐藏遮罩flag=0;　　　　　　　　　　　　　　　　　//重置为0
});

这里我使用了zepto.js库，再测了下，火狐，chrome，opera,QQ,系统默认的浏览器和微信，都能如愿

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！