2019獨角獸企業重金招聘Python工程師標準>>>

1、依靠css 將頁面
document.documentElement.style.overflow='hidden';
?
document.body.style.overflow='hidden';//手機版設置這個。
如果設置了如上，頁面的滾動條將會消失，此時鼠標滾輪失效。

?

// 禁止鍵盤滾動頁面

var move=function(e){
e.preventDefault && e.preventDefault();
e.returnValue=false;
e.stopPropagation && e.stopPropagation();
return false;
? ? }
? ? var keyFunc=function(e){
if(37<=e.keyCode && e.keyCode<=40){
return move(e);
}
}
? ? document.body.οnkeydοwn=keyFunc;

?

// 一直顯示滾動條

var st；
? ? var scroll=function(e){
clearTimeout(st);
st=setTimeout(function(){
window.scrollTo(loc.scrollLeft,loc.scrollTop);
},5);
? ? }
? ? window.οnscrοll=scroll;
?

2、建立一個函數
function bodyScroll(event){ ?
? ? event.preventDefault(); ?
}?

之后在觸發彈窗的時候禁止頁面滾動
document.body.addEventListener('touchmove',bodyScroll,false); ?
$('body').css({'position':'fixed',"width":"100%"});

關閉彈框時開啟頁面滾動
document.body.removeEventListener('touchmove',bodyScroll,false); ??
$("body").css({"position":"initial","height":"auto"}); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??

注意：切不可以下寫法
document.body.addEventListener('touchmove', function (event) { ?
? ? event.preventDefault(); ?
},false); ?
document.body.removeEventListener('touchmove', function (event) { ?
? ? event.preventDefault(); ?
},false);?

因為添加和移除的函數對象應該是同一個,要不然移除不起作用,即listener，所以不能直接用匿名函數function(e){e.preventDefault();}

轉載于:https://my.oschina.net/jack088/blog/3003051

總結

以上是生活随笔為你收集整理的弹窗时候禁止页面滚动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。