弹窗时候禁止页面滚动

你离开我真会死。 提交于 2021-02-20 08:55:36

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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!