前端開發(fā)經(jīng)常會(huì)遇到的一個(gè)問題就是制作一個(gè)彈框來向用戶提示信息，在這個(gè)彈框彈出的同時(shí)，往往會(huì)伴有一個(gè)灰色的遮罩層擋住頁面內(nèi)容，同時(shí)整個(gè)頁面被這層遮罩蓋住，不可點(diǎn)擊也不可滾動(dòng)。
方案一：控制overflow禁止?jié)L動(dòng)（ios不兼容）
要制作這個(gè)效果在PC端非常簡(jiǎn)單，只需要設(shè)置html的高度為100%占滿屏幕，并且將html的overflow設(shè)置為hidden，即可保證頁面不可滾動(dòng)。
但是同樣的問題在移動(dòng)端情況就有所區(qū)別。僅僅設(shè)置html的上列屬性，在移動(dòng)端仍然無法禁止頁面超出部分的滾動(dòng)，我們需要設(shè)置下面的代碼才能在彈框出現(xiàn)的時(shí)候禁止頁面滾動(dòng)：
html.style.overflow="hidden";
html.style.height="100%";
body.style.overflow="hidden";
body.style.height="100%";
原因是因?yàn)橐苿?dòng)端是基于touch事件，要禁止基于touch事件的滾動(dòng)，我們必須在對(duì)html禁止?jié)L動(dòng)的基礎(chǔ)之上，再將需要禁止?jié)L動(dòng)的內(nèi)容上再增加一個(gè)包裹層塊級(jí)元素，然后將這個(gè)包裹層塊級(jí)元素高度設(shè)置為100%并設(shè)置overflow:hidden;，那么在這里我們認(rèn)為body包裹了整個(gè)頁面，正是我們需要的塊級(jí)元素，將他也設(shè)置為禁止?jié)L動(dòng)，就可以保證移動(dòng)端頁面的滑動(dòng)時(shí)間不會(huì)觸發(fā)頁面滾動(dòng)。
當(dāng)用戶關(guān)閉了彈框，頁面也就恢復(fù)正常，我們?cè)O(shè)置如下CSS樣式屬性來還原整個(gè)頁面的滾動(dòng)效果：
html.style.overflow="visible";
html.style.height="auto";
body.style.overflow="visible";
body.style.height="auto";
這些樣式正是對(duì)應(yīng)CSS屬性的默認(rèn)樣式。
然而這個(gè)方案有一個(gè)缺陷，就是ios系統(tǒng)下不兼容，黑幕的效果沒法阻止頁面的滾動(dòng)。下面介紹移動(dòng)端的另一種解決方案。
方案二：絕對(duì)/固定布局阻止手勢(shì)滾動(dòng)事件冒泡（PC端無效）
正是因?yàn)橐苿?dòng)端的滾動(dòng)基于屏幕的touch事件，因此誕生了方案二（手機(jī)淘寶就使用了這種方案）。
首先我們需要知道兩個(gè)前提知識(shí)點(diǎn)：1、重疊的兩個(gè)頁面元素，z-index值更高的會(huì)優(yōu)先觸發(fā)事件監(jiān)聽，從而可以在此控制是否讓事件流繼續(xù)；2、移動(dòng)端滾動(dòng)的touch事件，基于事件流。
有了上面兩個(gè)知識(shí)點(diǎn)的基礎(chǔ)，我們就可以來理解這種方案的設(shè)計(jì)思路。方案二的原理是：不對(duì)原頁面進(jìn)行任何改動(dòng)，僅僅只是用一個(gè)擁有更高z-index值的，布局為absolute或者fixed布局的黑幕（長(zhǎng)寬100%）來擋住整個(gè)頁面，并且監(jiān)聽黑幕的touchstart事件，在touchstart事件內(nèi)結(jié)束事件流，從而阻擋事件流繼續(xù)。這樣，能夠產(chǎn)生滾動(dòng)效果的touch事件就傳不到頁面上，也就不會(huì)發(fā)生滾動(dòng)。
下面貼上方案二的完整測(cè)試源代碼：
<!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">開/關(guān)</button>
<div class="bottom"></div>
</div>
<div id="shield" class="black-shield" style="display:none;">
<div id="info" class="info">當(dāng)前黑幕彈出后，頁面應(yīng)該不可滑動(dòng)，點(diǎn)擊當(dāng)前文本，關(guān)閉黑幕</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");
//點(diǎn)擊顯示黑幕
trigger.addEventListener("click",function(){
shield.style.display="block";
},false);
//點(diǎn)擊關(guān)閉黑幕
info.addEventListener("touchstart",function(){
shield.style.display="none";
},false);
//在黑幕層阻擋touch事件
shield.addEventListener("touchstart",function(e){
e.stopPropagation();
e.preventDefault();
},false);
}
test2();
</script>
</body>
</html>
到此這篇關(guān)于前端頁面彈框遮罩禁止頁面滾動(dòng)的文章就介紹到這了,更多相關(guān)彈框遮罩禁止頁面滾動(dòng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
