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

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

第一步：构建一个函数

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