杰晶网络

前端页面弹框遮罩禁止页面滚动
网页制作 2024/11/23 佚名
3 2

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

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

方案一：控制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>
标签：
弹框遮罩,禁止页面滚动,移动端
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
评论“前端页面弹框遮罩禁止页面滚动”
暂无“前端页面弹框遮罩禁止页面滚动”评论...
www.imxmx.com 杰晶网络
8,675无损音乐
1,324高清电影
213破解软件
120,141站长资源
一句话新闻
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/11/23

3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。

苹果官方表示：

在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。

探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。

Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新动态

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网