【H5】阻止h5移动端弹窗页面弹层出现后禁止弹层下方页面滑动

摘要：昨天写页面的时候遇到了这样一个问题，有一个页面是有弹层出现的，弹层的内容高度不定。所以就给弹层设置了一个最大高为屏幕
     的80%，内容高度超出这个高度则给弹出层添加overflow:hidden属性。实现弹出层内容在弹出层内部实现滑动的效果。但是问题也就
     这样产生了。弹出层的下面页面也是能滑动，并且有时候会和弹出层内部的滑动出现冲突问题。
           

思路：
    1.通过给body设置overflow:hidden属性去隐藏超出手机屏幕的内容，以实现弹出层下页面滑动的问题
    2.通过给body设置fixed定位来解决底部页面滑动问题
           

首先我们下来看下效果图

上代码

首先我们需要先写两个函数方便之后控制禁止滑动好添加

//关闭弹出层底部页面滑动
function closeBodyScroll() {
    window.lockMaskScrollTop = document.scrollingElement.scrollTop || document.body.scrollTop;
    document.body.classList.add('open');
    document.body.style.top = -window.lockMaskScrollTop + "px";
    $("video").removeAttr("controls");
}

//打开弹出层底部页面滑动
function openBodyScroll() {
    if (document.body.classList.contains('open')) {
        document.body.classList.remove('open');
        document.scrollingElement.scrollTop = window.lockMaskScrollTop;
    }
}
           

其次我们还需要在css里面给body设置这个属性

第一种解决方案
body.open {
    height: 100%;
    overfolw: hidden;
}

第二种解决方案
body.open {
    position: fixed;
}
           

然后我们只需在打开弹出层和关闭弹出层的时候调用上面的两个函数控制弹出层底部页面是否滑动即可(以下仅做示例所用，请根据各自的效果进行调整即可)

// 公用打开报名表单
    $(".publiclassopenform").click(function(e) {
        $(".background-blank").fadeIn();
        $(".signMeeting_formbox").slideToggle();
        //关闭页面滑动
        closeBodyScroll();
    })

    //报名部门选择
    $(".signMeeting_formdepartitem").click(function(e) {
        $(".signMeeting_formdepartitem").removeClass("departactive");
        $(this).addClass("departactive");
        $(".chevalue").val($.trim($(this).text()));
    })

    //公用关闭报名表单
    $(".signMeeting_formclosebox").click(function(e) {
        $(".background-blank").fadeOut();
        $(".signMeeting_formbox").slideToggle();
        //打开页面滑动
        openBodyScroll();
    })