添加遮罩时禁止滚屏

添加遮罩时禁止滚屏

写页面经常会遇到弹出层，为了突显弹出层，一般会设一个遮罩

<div class="mask"></div> 遮罩层的样式为： 

.mask{
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 998;
    display: none;
}

可是这时会有一个问题，就是即使给遮罩层设为跟屏幕一样高一样宽，但一滚轮或手动时底下的页面如超过一屏仍会滚，如果禁止呢？ 有同学说这个不简单吗？直接给body设成100%高overflow:hidden就行了 以下代码： 

document.body.style.overflow='hidden';

document.body.style.height='100%';

在chrome里一试，果然行，纹丝不动啊，太神奇了是不是？可是不能光在chrome里测啊，咱还得考虑有人用了火狐啊QQ啊欧朋啊，在火狐里一试，页面照样能滚，真叫人皱眉头，不得已，继续搜，看有没有高见，又有同学说了把滚动条设为无，可是设为无只是不显示并不代表页面不滚哪，还有的说可以监听事件滚动的时候把scroolTop的值改为0， 

　　window.onscroll=function(){

 　　 document.body.scrollTop = 0

　　}

试了一下好象也无济于事哎（或许是手机端的事件跟电脑端不同原因），忽然想既然chrome里行，火狐不行没准是兼容的问题，于是写了一条加上：

document.body.style.overflow='hidden';

document.body.style.height='100%';

document.documentElement.style.overflow='hidden'

再试火狐也ok了，原来真是兼容性问题，但我们项目是在微信里用的，还得在微信里测下，
据说微信调用浏览器，如果手机上安装了qq浏览器则会调用QQ浏览器，如果没有则调用系统自带的，在微信里一测，可以禁止滚动，但是在释放时不行了，别的浏览器释放后能正常滚动，恢复到未弹出层时状态，就是页面超过一屏是可以滚动的，但是微信释放后也不能滚动了，这
可怎么办，前功尽弃了？只能再查，终于找到了，在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,系统默认的浏览器和微信，都能如愿执行，费了几个小时终于搞定啦