在移动端的页面开发过程中,经常会遇到点击弹框禁止页面滚动的情景,下面就来说下具体的做法。。。

第一步:构建一个函数

function bodyScroll(event){
event.preventDefault();
}

第二步:点击禁止页面滚动

$(".button").click(function(){
document.body.addEventListener('touchmove',bodyScroll,false);
$('body').css({'position':'fixed',"width":"100%"});
});

第三步:点击开启页面滚动

$(".shadow-closes").click(function(){
document.body.removeEventListener('touchmove',bodyScroll,false);
$("body").css({"position":"initial","height":"auto"});
});

完整代码:

$(".button").click(function(){
document.body.addEventListener('touchmove',bodyScroll,false);
$('body').css({'position':'fixed',"width":"100%"});
});
$(".shadow-closes").click(function(){
document.body.removeEventListener('touchmove',bodyScroll,false);
$("body").css({"position":"initial","height":"auto"});
});
function bodyScroll(event){
event.preventDefault();
}

js开启和关闭页面滚动【亲测有效】-LMLPHP

05-08 07:56