如何顯示遮罩層時禁止底層頁面滑動
阿新 • • 發佈:2019-02-04
個人github:https://github.com/qiilee 歡迎follow
在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,系統預設的瀏覽器和微信,都能如願