前端頁(yè)面彈框遮罩禁止頁(yè)面滾動(dòng)
我要評(píng)論前端開(kāi)發(fā)經(jīng)常會(huì)遇到的一個(gè)問(wèn)題就是制作一個(gè)彈框來(lái)向用戶提示信息，在這個(gè)彈框彈出的同時(shí)，往往會(huì)伴有一個(gè)灰色的遮罩層擋住頁(yè)面內(nèi)容，同時(shí)整個(gè)頁(yè)面被這層遮罩蓋住，不可點(diǎn)擊也不可滾動(dòng)。
方案一：控制overflow禁止?jié)L動(dòng)（ios不兼容）
要制作這個(gè)效果在PC端非常簡(jiǎn)單，只需要設(shè)置html的高度為100%占滿屏幕，并且將html的overflow設(shè)置為hidden，即可保證頁(yè)面不可滾動(dòng)。
但是同樣的問(wèn)題在移動(dòng)端情況就有所區(qū)別。僅僅設(shè)置html的上列屬性，在移動(dòng)端仍然無(wú)法禁止頁(yè)面超出部分的滾動(dòng)，我們需要設(shè)置下面的代碼才能在彈框出現(xiàn)的時(shí)候禁止頁(yè)面滾動(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è)頁(yè)面，正是我們需要的塊級(jí)元素，將他也設(shè)置為禁止?jié)L動(dòng)，就可以保證移動(dòng)端頁(yè)面的滑動(dòng)時(shí)間不會(huì)觸發(fā)頁(yè)面滾動(dòng)。
當(dāng)用戶關(guān)閉了彈框，頁(yè)面也就恢復(fù)正常，我們?cè)O(shè)置如下CSS樣式屬性來(lái)還原整個(gè)頁(yè)面的滾動(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)下不兼容，黑幕的效果沒(méi)法阻止頁(yè)面的滾動(dòng)。下面介紹移動(dòng)端的另一種解決方案。
方案二：絕對(duì)/固定布局阻止手勢(shì)滾動(dòng)事件冒泡（PC端無(wú)效）
正是因?yàn)橐苿?dòng)端的滾動(dòng)基于屏幕的touch事件，因此誕生了方案二（手機(jī)淘寶就使用了這種方案）。
首先我們需要知道兩個(gè)前提知識(shí)點(diǎn)：1、重疊的兩個(gè)頁(yè)面元素，z-index值更高的會(huì)優(yōu)先觸發(fā)事件監(jiān)聽(tīng)，從而可以在此控制是否讓事件流繼續(xù)；2、移動(dòng)端滾動(dòng)的touch事件，基于事件流。
有了上面兩個(gè)知識(shí)點(diǎn)的基礎(chǔ)，我們就可以來(lái)理解這種方案的設(shè)計(jì)思路。方案二的原理是：不對(duì)原頁(yè)面進(jìn)行任何改動(dòng)，僅僅只是用一個(gè)擁有更高z-index值的，布局為absolute或者fixed布局的黑幕（長(zhǎng)寬100%）來(lái)?yè)踝≌麄€(gè)頁(yè)面，并且監(jiān)聽(tīng)黑幕的touchstart事件，在touchstart事件內(nèi)結(jié)束事件流，從而阻擋事件流繼續(xù)。這樣，能夠產(chǎn)生滾動(dòng)效果的touch事件就傳不到頁(yè)面上，也就不會(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">開(kāi)/關(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è)面應(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)于前端頁(yè)面彈框遮罩禁止頁(yè)面滾動(dòng)的文章就介紹到這了,更多相關(guān)彈框遮罩禁止頁(yè)面滾動(dòng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
CSS設(shè)計(jì)之頁(yè)面滾動(dòng)條出現(xiàn)時(shí)防止頁(yè)面跳動(dòng)的方法
這篇文章主要介紹了CSS設(shè)計(jì)之頁(yè)面滾動(dòng)條出現(xiàn)時(shí)防止頁(yè)面跳動(dòng)的方法,在使用overflow:auto之后這樣的跳動(dòng)情況是一個(gè)常見(jiàn)問(wèn)題,本文給出了相關(guān)處理方法,需要的朋友可以參考下2015-06-08使用overflow: hidden來(lái)禁用頁(yè)面滾動(dòng)條
禁用頁(yè)面滾動(dòng)條的方法有很多，但最簡(jiǎn)單、最快的也就數(shù)overflow: hidden了，下面是禁用html及body滾動(dòng)條的方法，兼容IE6、72014-09-04純css 實(shí)現(xiàn)footer 一直在頁(yè)面底部，不隨頁(yè)面滾動(dòng)
CSS的簡(jiǎn)單在于它易學(xué)，CSS的困難在于尋找更好的解決方案。在CSS的世界里，似乎沒(méi)有完美這種說(shuō)法。所以，現(xiàn)在介紹的CSS絕對(duì)底部，只是目前個(gè)人見(jiàn)過(guò)的方案中比較完美的吧。2014-09-02
HTML頁(yè)面滾動(dòng)時(shí)部分內(nèi)容位置固定不滾動(dòng)的實(shí)現(xiàn)
這篇文章主要介紹了HTML 頁(yè)面滾動(dòng)時(shí)部分內(nèi)容位置固定不滾動(dòng)的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著2021-04-14