前端页面弹框遮罩禁止页面滚动

网页制作 2024/12/22 佚名

3 1 2

快活林资源网 Design By www.csstdc.com

前端开发经常会遇到的一个问题就是制作一个弹框来向用户提示信息，在这个弹框弹出的同时，往往会伴有一个灰色的遮罩层挡住页面内容，同时整个页面被这层遮罩盖住，不可点击也不可滚动。

方案一：控制overflow禁止滚动（ios不兼容）

要制作这个效果在PC端非常简单，只需要设置html的高度为100%占满屏幕，并且将html的overflow设置为hidden，即可保证页面不可滚动。
但是同样的问题在移动端情况就有所区别。仅仅设置html的上列属性，在移动端仍然无法禁止页面超出部分的滚动，我们需要设置下面的代码才能在弹框出现的时候禁止页面滚动：

html.style.overflow="hidden";
html.style.height="100%";
body.style.overflow="hidden";
body.style.height="100%";

原因是因为移动端是基于touch事件，要禁止基于touch事件的滚动，我们必须在对html禁止滚动的基础之上，再将需要禁止滚动的内容上再增加一个包裹层块级元素，然后将这个包裹层块级元素高度设置为100%并设置overflow:hidden;，那么在这里我们认为body包裹了整个页面，正是我们需要的块级元素，将他也设置为禁止滚动，就可以保证移动端页面的滑动时间不会触发页面滚动。
当用户关闭了弹框，页面也就恢复正常，我们设置如下CSS样式属性来还原整个页面的滚动效果：

html.style.overflow="visible";
html.style.height="auto";
body.style.overflow="visible";
body.style.height="auto";

这些样式正是对应CSS属性的默认样式。
然而这个方案有一个缺陷，就是ios系统下不兼容，黑幕的效果没法阻止页面的滚动。下面介绍移动端的另一种解决方案。

方案二：绝对/固定布局阻止手势滚动事件冒泡（PC端无效）

正是因为移动端的滚动基于屏幕的touch事件，因此诞生了方案二（手机淘宝就使用了这种方案）。
首先我们需要知道两个前提知识点：1、重叠的两个页面元素，z-index值更高的会优先触发事件监听，从而可以在此控制是否让事件流继续；2、移动端滚动的touch事件，基于事件流。
有了上面两个知识点的基础，我们就可以来理解这种方案的设计思路。方案二的原理是：不对原页面进行任何改动，仅仅只是用一个拥有更高z-index值的，布局为absolute或者fixed布局的黑幕（长宽100%）来挡住整个页面，并且监听黑幕的touchstart事件，在touchstart事件内结束事件流，从而阻挡事件流继续。这样，能够产生滚动效果的touch事件就传不到页面上，也就不会发生滚动。

下面贴上方案二的完整测试源代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.main-content{
				position:relative;
				width:100%;
				background-color:#ccc;
				height:2000px;
			}

			.main-content .trigger{
				width:200px;
				height:100px;
				font-size:30px;
				color:#000;
			}

			.main-content .bottom{
				position:absolute;
				bottom:0;
				left:0;
				width:100%;
				height:200px;
				background-color:red;
			}

			.black-shield{
				position:fixed;
				top:0;
				left:0;
				width:100%;
				height:100%;
				background-color:rgba(10,10,10,0.4);
				z-index:10;
			}

			.black-shield .info{
				font-size:40px;
				color:#000;
				border:1px solid;
				z-index:20;
			}
		</style>
	</head>
	<body>
		<div class="main-content">
			<button id="trigger" class="trigger">开/关</button>
			<div class="bottom"></div>
		</div>
		<div id="shield" class="black-shield" style="display:none;">
			<div id="info" class="info">当前黑幕弹出后，页面应该不可滑动，点击当前文本，关闭黑幕</div>
		</div>
		
		<script>
			function test2(){
				var showShield=false;
				var shield=document.getElementById("shield");
				var trigger=document.getElementById("trigger");
				var info=document.getElementById("info");
				var body=document.querySelector("body");
				var html=document.querySelector("html");

				//点击显示黑幕
				trigger.addEventListener("click",function(){
					shield.style.display="block";
				},false);

				//点击关闭黑幕
				info.addEventListener("touchstart",function(){
					shield.style.display="none";
				},false);

				//在黑幕层阻挡touch事件
				shield.addEventListener("touchstart",function(e){
					e.stopPropagation();
					e.preventDefault();
				},false);
			}

			test2();
		</script>
	</body>
</html>

弹框遮罩,禁止页面滚动,移动端

快活林资源网 Design By www.csstdc.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

快活林资源网 Design By www.csstdc.com

评论“前端页面弹框遮罩禁止页面滚动”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年12月22日

前端页面弹框遮罩禁止页面滚动

html中使用vue-router的示例代码

HTML基本标签及结构详解

评论“前端页面弹框遮罩禁止页面滚动”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接