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

来源：互联网发布：金庸小说排名知乎编辑：程序博客网时间：2024/05/20 07:59

在touchmove时禁用浏览器默认事件，

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

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

var aBtn=$('#a1');      //点击按钮var guide=$('.guide');  //弹出的遮罩层var flag=0; 　　　　　　  //标识，初始为0aBtn.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,系统默认的浏览器和微信，都能如愿

阅读全文

0 0