关于页面出现弹窗时,页面还可以滚动问题

1、当我们的布局中是采用body为容器的页面滚动时,当出现在弹窗的时候,虽然给弹窗和遮罩加上固定布局fixed,但是在移动端中,页面还是会跟着滚动,无法滚动布局。

解决方案一:我们可以进行如下设置,注意,此时body的宽度需要设置为100%,不然会出错!

// 防止关闭弹窗以后 body回到dingbu
var Fixedtop,
    isLock = false; //锁屏状态
function ifFixed(fixedFlag) {
    if(fixedFlag){
        Fixedtop = window.scrollY
        document.body.style.position = 'fixed'
        document.body.style.top = -Fixedtop + 'px'
        isLock = true;
    }else{
        document.body.style.position = 'initial'
        document.body.style.top = 0
        window.scrollTo(0, Fixedtop)
        isLock = false;
    }
}

解决方案二:改用content布局滚动,而不用body滚动

具体见移动端中遇到的坑(bug)一篇

原文地址:https://www.cnblogs.com/qdlhj/p/10097389.html