如何顯示遮罩層時禁止底層頁面滑動

在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
});

當遮罩層滾動到最低端或是最頂端的時候還是會滾動底部的內容

最終解決方案：

彈出層父元素設置屬性爲overflow-y:scroll;
彈窗彈出時，用js控制讓底層元素的position屬性設置爲fixed;
彈窗關閉時候，用js控制底層元素的position屬性爲正常；
在iOS端，爲了彈窗裏面的滾動效果看起來順滑，需要設置彈窗層的包裹元素屬性：-webkit-overflow-scrolling : touch; 

• 1
• 2
• 3
• 4

其實還是存在一點小問題，就是彈出層消失的時候，底層頁面會自動滾動到頂部，我們可以在彈出層彈出的時候記錄一下當前位置，然後在彈出層消失的時候js控制滾動到之前的位置