关于移动端css+js解决遮罩问题方法。

最新推荐文章于 2022-03-15 17:14:20 发布

Iamgoodgilr

最新推荐文章于 2022-03-15 17:14:20 发布

阅读量3.2k

点赞数 1

文章标签：遮罩滚动冒泡 js css

本文链接：https://blog.csdn.net/Iamgoodgilr/article/details/52472189

版权

今天找到一种解决方式：当一个页面超过屏幕的时候，会出现滚动，但是当我们弹出遮罩时，会发现还是页面还是可以滚动。

有2种情况：

第一种：就是在弹框的遮罩上有滚动（比如说滚动列表），就是说页面一个滚动，弹框也有一个滚动。

解决方法：把整个页面用一个div（当然也可以用别的）包起来，在点击页面时，给div动态加一个class，再把遮罩弹框显示；点击遮罩时弹框时，再把class移除。

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta charset="utf-8">
  <style>
			.overlaytwo,
			.overlay {
				position: fixed;
				top: 0;
				left: 0;
				z-index: 0;
				width: 100%;
				height: 100%;
				background-color: transparent;
			}
			.overlaytwo{
				background-color: rgba(0,0,0,0.8);
				display: none;
			}
  </style>
</head>
<body>
	<div id="overlay">
		<p id="yaya">吖吖aaa</p>
		<p>吖吖</p>
		<p>吖吖</p>
		<p>吖吖</p>
		<p>吖吖</p>
		<p>吖吖</p>
		<p>吖吖</p>
		<p>吖吖</p>
		<p>吖吖</p>
		<p>吖吖</p>
		<p>吖吖</p>
		<p>吖吖</p>
		<p>吖吖</p>
		<p>吖吖</p>
		<p>吖吖</p>
	</div>
	<div id="overlaytwo" class="overlaytwo">
			<div style="position: absolute;background: red;color: #FFFFFF;z-index: 1;">
				<div style="height: 100px;overflow: auto;">
					<p>bbbbbbbbbbbb</p>
					<p>bbbbbbbbbbbb</p>
					<p>bbbbbbbbbbbb</p>
					<p>bbbbbbbbbbbb</p>
				</div>				
			</div>
	</div>
	
</body>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
		$("#yaya").click(function(){
			$("#overlay").addClass("overlay");
			$("#overlaytwo").show();
		});
		$("#overlaytwo").click(function(){
			$("#overlay").removeClass("overlay");
			$("#overlaytwo").hide();
		});
</script>
</html>

第二种：就是在弹框的遮罩上无滚动。这时候想要页面在弹框的时候不滚动就直接使用阻止冒泡事件就可以了。

解决方法：把遮罩弹框在滑动的时候给一个阻止冒泡事件。

$('#shade').bind( "touchmove", function (e) {
e.preventDefault();
});

Iamgoodgilr

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
关于移动端css+js解决遮罩问题方法。

今天找到一种解决方式：当一个页面超过屏幕的时候，会出现滚动，但是当我们弹出遮罩时，会发现还是页面还是可以滚动。有2种情况：第一种：就是在弹框的遮罩上有滚动（比如说滚动列表），就是说页面一个滚动，弹框也有一个滚动。解决方法：把整个页面用一个div（当然也可以用别的）包起来，在点击页面时，给div动态加一个class，再把遮罩上面的弹层样式显示；再点击时，再把class移除。
复制链接

扫一扫