移动端 PC端 JavaScript 禁止弹层底部滚动 / 禁止模态框底部滚动 / 阻止弹框底部滚动 js禁止弹窗底部滚动

//设置一个经常要用到的禁止模态框底部滚动的公共方法

//1、手机端移动端使用--禁用touchmove事件

/** 阻止弹窗底层内容滚动，如body内容, 需传入参数dom元素节点 和 是否打开模态层的布尔值true/false(1 或 0 ) **/
var toggleModal = function(dom,isModal) {
    var el = document.querySelector(dom);
    var stop = function (e) {
        e.stopPropagation();
        e.preventDefault();
    }
    if(isModal){
        el.addEventListener("touchmove",stop,false);
    }
    else {
        el.removeEventListener("touchmove",stop,false);
    }
}

 注意：该方法要在页面挂在完后调用才生效。如： window.onload = function() {toggleModal('.modal', 1)}

 

 

 //1、PC端使用--body的overflow：hidden

/** 阻止弹窗底层内容滚动，如body内容, 需传入参数true/false(1 或 0 ) **/

var toggleBody = function(isModal) {
    if(isModal){
    
        //方法一
        //document.body.style.overflow = 'hidden'

        //方法二
        document.body.style.height = '100vh';

        document.body.style['overflow-y'] = 'hidden'
    }
    else {
        //方法一
        //document.body.style.overflow= 'auto'

        //方法二
        document.body.style.height = 'unset';

        document.body.style['overflow-y'] = 'auto'

    }
};
toggleBody(1);