前端页⾯弹框遮罩禁⽌页⾯滚动
前端页⾯弹框遮罩禁⽌页⾯滚动
前端开发经常会遇到的⼀个问题就是制作⼀个弹框来向⽤户提⽰信息，在这个弹框弹出的同时，往往会伴有⼀个灰⾊的遮罩层挡住页⾯内容，同时整个页⾯被这层遮罩盖住，不可点击也不可滚动。
⽅案⼀：控制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" >
<div id="info" class="info">当前⿊幕弹出后，页⾯应该不可滑动，点击当前⽂本，关闭⿊幕</div>  </div>
<script>
function test2(){
var showShield=false;
var ElementById("shield");
var ElementById("trigger");
var ElementById("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";
html滚动效果代码
},false);
//在⿊幕层阻挡touch事件
shield.addEventListener("touchstart",function(e){
e.stopPropagation();
e.preventDefault();
},false);
}
test2();
</script>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。