移動(dòng)端阻止彈窗下層頁(yè)面被滑動(dòng)方法介紹
在做H5開(kāi)發(fā)時(shí)，很多場(chǎng)景下都需要彈窗。
當(dāng)出現(xiàn)彈窗時(shí)，大部分場(chǎng)景下是期望彈窗下層頁(yè)面不能被滑動(dòng)的。
當(dāng)然也不期望彈窗被滑動(dòng)
近期肝頁(yè)面又碰到了這個(gè)問(wèn)題
下面介紹幾種最常用的方式，以及一些邊界情況與應(yīng)對(duì)策略。
overflow:hidden
流傳最廣的方式就是 給元素設(shè)置 overflow:hidden
給body設(shè)置，就能達(dá)到阻止頁(yè)面滑動(dòng)的目的
document.body.style.overflow = 'hidden'
document.body.style.overflow = 'visible'
大部分情況下這個(gè)是能有效果的
但在部分機(jī)器上，這個(gè)是不生效的:
彈窗遮罩
還有一種情況如下，頁(yè)面部分元素有局部滑動(dòng)
<body style="overflow:hidden;">
<div style="overflow:scroll;height:100%;">
<!-- more element -->
</div>
</body>
當(dāng)前情況給body設(shè)置 overflow:hidden依舊是無(wú)效果的
此時(shí)給彈窗加上遮罩如下，正常情況下，下層元素就不會(huì)收到touchmove事件
<body style="overflow:hidden;">
<div style="overflow:scroll;height:100%;">
<!-- more element -->
</div>
<!-- dialog -->
<div class="dialog">
<!-- 遮罩 -->
<div class="mask" style="position:fixed;inset:0;"></div>
<div class="content"></div>
</div>
</body>
其中inset屬性是left,top,right,bottom的簡(jiǎn)寫(xiě)
但在部分機(jī)型下，下層元素仍然會(huì)收到touchmove事件，因此會(huì)跟著滑動(dòng)
于是需要祭出下面的方法
prevent touchmove
阻止觸摸滑動(dòng)事件touchmove的默認(rèn)行為
const touchHandle = function(e) {
e.preventDefault()
}
// 彈窗的事件
{
onShow(){
document.body.addEventListener('touchmove', preventDefault, {
passive: false,
});
},
onHide(){
document.body.removeEventListener('touchmove', preventDefault);
}
}
在彈窗打開(kāi)時(shí)直接阻止目標(biāo)元素的滑動(dòng)事件的默認(rèn)行為
彈窗內(nèi)容是不可滑動(dòng)的話，那么這種方法是最省事高效的
如果彈窗中有可滑動(dòng)的內(nèi)容，且滑動(dòng)的內(nèi)容比較復(fù)雜
那么通過(guò)touchmove去細(xì)力度的控制阻止滑動(dòng)事件時(shí)就很麻煩
position:fixed
還有一種常用的就是position:fixed
在彈窗打開(kāi)時(shí)，將目標(biāo)元素進(jìn)行固定，在關(guān)閉時(shí)恢復(fù)
由于定位會(huì)改變?cè)卦陧?yè)面上的位置，所以需要在fixed前記錄元素的位置
取消fixed之后將元素又滾動(dòng)到原來(lái)的位置
// 彈窗的事件
{
onShow(){
document.body.style.top = `${
document.body.getClientRects()[0].top
}px`;
document.body.style.position = 'fixed';
document.body.style.left = '0';
document.body.style.right = '0';
},
onHide(){
document.body.style.position = 'visible';
window.scrollTo(
0,
Math.abs(+document.body.style.top.replace('px', ''))
);
}
}
使用class代替style
這個(gè)也是碰巧發(fā)現(xiàn)的，在iOS低端機(jī)將上述方式都嘗試后
仍發(fā)現(xiàn)一個(gè)問(wèn)題，現(xiàn)象如下(TODO：補(bǔ)圖)
下層頁(yè)面不會(huì)被滑動(dòng)了，但遮罩和彈窗整體還能被下拉
彈窗是一個(gè)下拉列表彈窗，其出現(xiàn)的位置需要?jiǎng)討B(tài)的計(jì)算，如下結(jié)構(gòu)
<body style="overflow:hidden;">
<!-- dialog -->
<div class="dialog" style="top:88px;">
<!-- 遮罩 -->
<div class="mask" style="position:fixed;inset:0;"></div>
<!-- 內(nèi)容 -->
<div class="content"></div>
</div>
</body>
最終發(fā)現(xiàn)是由于style與class設(shè)置的樣式在這個(gè)機(jī)型上展示雖然一致
但實(shí)際交互起來(lái)的表現(xiàn)卻不一致
修復(fù)后的html結(jié)構(gòu)如下,在元素里插入了一個(gè)style標(biāo)簽，使用class選擇器與!important重載這個(gè)距離的樣式
<body style="overflow:hidden;">
<!-- dialog -->
<div class="dialog" style="top:88px;">
<!-- 遮罩 -->
<div class="mask" style="position:fixed;inset:0;"></div>
<!-- 內(nèi)容 -->
<div class="content"></div>
<style>
.dialog{
top:88px !important;
}
</style>
</div>
</body>
代碼如下
{
onShow(){
setTimeout(() => {
const dialogEl = document.querySelector<HTMLElement>('.dialog')
if (!dialogEl) {
return
}
const style = document.createElement('style')
style.textContent = `
.dialog{
top:${dialogEl.style.top} !important;
}
`
dialogEl.append(style)
}, 200)
}
}
非常令人迷惑的一個(gè)操作，但就是解決了問(wèn)題
小結(jié)
針對(duì)移動(dòng)端彈窗下層頁(yè)面可被滑動(dòng)的異常場(chǎng)景
本文介紹了4種常見(jiàn)解決方法，與1種"謎之操作"
demo截圖
