添加遮罩時禁止滾屏

寫頁面常常會遇到彈出層，爲了突顯彈出層，通常會設一個遮罩

<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,系統默認的瀏覽器和微信，都能如願執行，費了幾個小時終於搞定啦