弹窗遮罩禁止页面滚动

一,控制页面overflow (会有兼容问题)

$('html,body').css({'overflow':'auto','height':'auto'})

这种情况下,只有页面高度为100%时有用,当页面高度不是100%,页面还是可以滚动的

如果弹窗遮罩是用fixed定位的,页面高度不是100%,会出现页面滚动时,弹窗会一顿一顿的更新显示在当前视图

还有如果页面往下滑动了,页面出现弹窗,当弹窗隐藏,页面滚动会置顶

二、在手机端 禁止触摸滚动

function menuGrid(){
    var menu = '<div id="shield"></div>';
    $('body').append(menu);
    // 禁止页面滚动 
    var shield=document.getElementById("shield");
    shield.addEventListener("touchmove",function(e){
        e.stopPropagation();
        e.preventDefault();
    },false);

}

猜你喜欢

转载自blog.csdn.net/qq_36061522/article/details/81670423