移动端弹窗时静止页面滚动

先定义两个方法,分别是禁止滚动和恢复滚动的方法

var scroll_save = 0;//记录滚动条滚动的值
function show(scroll_) {
	$('html,body').css({
    		overflow: 'hidden',
    		position: 'fixed',
    		top: '-' + scroll_ + 'px' // 防止滚动到顶部
	})
}
function hide(scroll_save) {
	$('html,body').css({
    		overflow: 'auto',
    		position: 'static',
    		top: 'initial'
	})
	$(window).scrollTop(scroll_save) // 恢复滚动条位置
}

然后在点击要打开的弹出层方法中调用show()方法,并传入滚动条滚动的值scroll_

function opendelaywin(){
    var scroll_ = document.body.scrollTop||document.documentElement.scrollTop;//获取滚动条滚动的值
    scroll_save = scroll_;//将滚动条滚动的值存入scroll_save中
    $(".mark").height($(window).height());//将遮罩层mark的高度设置为手机可视窗口的高度
	$(".mark").css("top",scroll_);
	show(scroll_);
	$(".mark").removeClass("hide_");
	$(".mark_delayDiv").slideDown();//让遮罩层中的内容显示
}
//关闭
function close(){
//点击关闭时将遮罩层的内容以及遮罩层关闭,并且调用hide()方法恢复滚动,同时传入scroll_save值恢复滚动条位置
    $(".mark_delayDiv").slideUp(function(){
        $(".mark_jubao").addClass("hide_");
        hide_1(scroll_save);
    });
}

猜你喜欢

转载自blog.csdn.net/qq_41981057/article/details/84853517