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

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

var save_scorll;//记录滚动条滚动的值
//打开显示层方法   doc1表示弹出层的标签名   doc2表示弹出层里面最外层内容的标签名
function show_mark(doc1,doc2){
	var scorll_ = document.body.scrollTop || document.documentElement.scrollTop; //js获取滚动高度 
	save_scorll = scorll_;   //保存
	var clientHeight_ = document.documentElement.clientHeight;// 网页工作区域的高度和宽度  
	$(doc1).removeClass("mark_hide");
	$(doc1).css({"height":clientHeight_,"top":scorll_});
	$(doc2).slideDown();
	set_noSliding(scorll_);
}
//关闭弹出层方法  doc1表示弹出层的标签名   doc2表示弹出层里面最外层内容的标签名
function close_mark(doc1,doc2){
	$(doc2).slideUp(function(){
		$(doc1).addClass("mark_hide");
		set_sliding(save_scorll);
	})
}

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

//弹出层打开后禁止页面滚动
function set_noSliding(scorll_){
	$("html,body").css({
		'position':'fixed',
		'width':'100%',
		'height':'100%',
		'top':'-'+scorll_+'px'
	})
}

//弹出层关闭后恢复页面滚动
function set_sliding(save_scorll){
	$("html,body").css({
		'position':'static',
		'width':'100%',
		'height':'100%',
		'top':'initial'
	});
	$(window).scrollTop(save_scorll);  //恢复滚动位置
}

最后

以上就是潇洒季节为你收集整理的移动端弹窗时静止页面滚动的全部内容，希望文章能够帮你解决移动端弹窗时静止页面滚动所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。