先定义两个方法,分别是禁止滚动和恢复滚动的方法
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);
});
}