弹窗时候禁止页面滚动

• Z时代
• 2024-01-10
• 分类：综合

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.onkeydown=keyFunc;

// 一直显示滚动条

var st；
    var scroll=function(e){
clearTimeout(st);
st=setTimeout(function(){
window.scrollTo(loc.scrollLeft,loc.scrollTop);
},5);
    }
    window.onscroll=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();}

以上是 弹窗时候禁止页面滚动 的全部内容， 来源链接： utcz.com/z/510087.html