移动端web页面蒙层滚动时页面主体内容不随之滚动的实现方法

最新推荐文章于 2023-06-19 12:09:39 发布

飞舞妙画

最新推荐文章于 2023-06-19 12:09:39 发布

阅读量3.4k

点赞数

分类专栏： js css

本文链接：https://blog.csdn.net/feiwumiaohua/article/details/68061305

版权

css 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

在做移动端web时，遇到一个需求：页面主体内容上有蒙层，蒙层中有个滚动区域，要实现蒙层滚动区域滚动时页面主体内容不随之滚动的效果。

情景1：蒙层为不透明时，蒙层滚动，页面主体内容滚动不滚动看不到，故可以偷懒对其“视而不见”，单独控制蒙层的滚动即可。

情景2：蒙层透明时，页面主体滚动情况可直接看到，不能忽视，需要处理蒙层滚动对页面主体的影响。

以情景2作为目标情景，以下为实验解决过程：

方法一、蒙层fixed定位，蒙层显示时body设置属性overflow:hidden，蒙层中需要滚动的区域设置overflow:auto。当蒙层隐藏时body恢复overflow:auto。

<!doctype html>
<html>
	<head>
		<meta charset='utf-8'>
		<title></title>
		<meta name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no'>
		<style>
		html,body,p,div,span,h1,h2,h3,h4,h5,a,img{margin:0;padding:0;}
		html,body{
			height:100%;
		}
		#mask{
			position: fixed;
			top:0;
			left:0;
			height:100%;
			width:100%;
			display:none;
		}
		#maskBg{
			position:absolute;
			top:0;
			left:0;
			height:100%;
			width:100%;
			background-color:#000;
			opacity:0.5;
			filter:alpha(opacity=50);
		}
		#maskWrp{
			position: absolute;
			width:200px;
			height:100%;
			left:50%;
			top:0;
			margin-left:-100px;
			overflow-y:auto;
		}
		#maskCont{
			background-color:#f00;

		}
		p{height:100px;}
		</style>
	</head>
	<body>
	<div id='mainCont'>
	<p >main1 <span style='color:#f00'>点击页面，蒙层显示</span></p>
	<p >main2</p>
	<p >main3</p>
	<p >main4</p>
	<p >main5</p>
	<p >main6</p>
	<p >main7</p>
	<p >main8</p>
	<p >main9</p>
	<p >main10</p>
	</div>
	<div id='mask'>
	<div id='maskBg'></div>
	<div id='maskWrp'>
		<div id='maskCont'>
			<p >mask1 点击蒙层，蒙层隐藏</p>
			<p >mask2</p>
			<p >mask3</p>
			<p >mask4</p>
			<p >mask5</p>
			<p >mask6</p>
			<p >mask7</p>
			<p >mask8</p>
			<p >mask9</p>
			<p >mask10</p>
		</div>
	</div>
	</div>
	<script>
	var body=document.body;
	var main=document.getElementById('mainCont');
	var mask=document.getElementById('mask');
	//click #mainCont:mask show
	main.addEventListener('click',function(){
		mask.style.display='block';
		body.style.overflow='hidden';
	},false);
	//click #mask:mask hide
	mask.addEventListener('click',function(){
		this.style.display='none';
		body.style.overflow='auto';
	},false);

	</script>
	</body>
</html>

方法二、当蒙层显示时，设置body.addEventListener('touchstart',function(e){e.preventDefault();})。该方法会使页面中的overflow:auto/scroll滚动都失效，可以再对蒙层上需要滚动的区域使用touchwipe.js等js手势库来实现滚动。