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

110 阅读 0 评论 73 点赞

我是靠谱客的博主潇洒季节，这篇文章主要介绍移动端弹窗时静止页面滚动，现在分享给大家，希望可以做个参考。

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

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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_

复制代码

1
2
3
4
5
6
7
8
9
10
11
//弹出层打开后禁止页面滚动
function set_noSliding(scorll_){
	$("html,body").css({
		'position':'fixed',
		'width':'100%',
		'height':'100%',
		'top':'-'+scorll_+'px'
	})
}

复制代码

1
2
3
4
5
6
7
8
9
10
11
//弹出层关闭后恢复页面滚动
function set_sliding(save_scorll){
	$("html,body").css({
		'position':'static',
		'width':'100%',
		'height':'100%',
		'top':'initial'
	});
	$(window).scrollTop(save_scorll);  //恢复滚动位置
}