移動端阻止彈窗下層頁面被滑動方法介紹
在做H5開發時，很多場景下都需要彈窗。
當出現彈窗時，大部分場景下是期望彈窗下層頁面不能被滑動的。
當然也不期望彈窗被滑動
近期肝頁面又碰到了這個問題
下面介紹幾種最常用的方式，以及一些邊界情況與應對策略。
overflow:hidden
流傳最廣的方式就是 給元素設置 overflow:hidden
給body設置，就能達到阻止頁面滑動的目的
document.body.style.overflow = 'hidden'
document.body.style.overflow = 'visible'
大部分情況下這個是能有效果的
但在部分機器上，這個是不生效的:
彈窗遮罩
還有一種情況如下，頁面部分元素有局部滑動
<body style="overflow:hidden;">
<div style="overflow:scroll;height:100%;">
<!-- more element -->
</div>
</body>
當前情況給body設置 overflow:hidden依舊是無效果的
此時給彈窗加上遮罩如下，正常情況下，下層元素就不會收到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的簡寫
但在部分機型下，下層元素仍然會收到touchmove事件，因此會跟著滑動
于是需要祭出下面的方法
prevent touchmove
阻止觸摸滑動事件touchmove的默認行為
const touchHandle = function(e) {
e.preventDefault()
}
// 彈窗的事件
{
onShow(){
document.body.addEventListener('touchmove', preventDefault, {
passive: false,
});
},
onHide(){
document.body.removeEventListener('touchmove', preventDefault);
}
}
在彈窗打開時直接阻止目標元素的滑動事件的默認行為
彈窗內容是不可滑動的話，那么這種方法是最省事高效的
如果彈窗中有可滑動的內容，且滑動的內容比較復雜
那么通過touchmove去細力度的控制阻止滑動事件時就很麻煩
position:fixed
還有一種常用的就是position:fixed
在彈窗打開時，將目標元素進行固定，在關閉時恢復
由于定位會改變元素在頁面上的位置，所以需要在fixed前記錄元素的位置
取消fixed之后將元素又滾動到原來的位置
// 彈窗的事件
{
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
這個也是碰巧發現的，在iOS低端機將上述方式都嘗試后
仍發現一個問題，現象如下(TODO：補圖)
下層頁面不會被滑動了，但遮罩和彈窗整體還能被下拉
彈窗是一個下拉列表彈窗，其出現的位置需要動態的計算，如下結構
<body style="overflow:hidden;">
<!-- dialog -->
<div class="dialog" style="top:88px;">
<!-- 遮罩 -->
<div class="mask" style="position:fixed;inset:0;"></div>
<!-- 內容 -->
<div class="content"></div>
</div>
</body>
最終發現是由于style與class設置的樣式在這個機型上展示雖然一致
但實際交互起來的表現卻不一致
修復后的html結構如下,在元素里插入了一個style標簽，使用class選擇器與!important重載這個距離的樣式
<body style="overflow:hidden;">
<!-- dialog -->
<div class="dialog" style="top:88px;">
<!-- 遮罩 -->
<div class="mask" style="position:fixed;inset:0;"></div>
<!-- 內容 -->
<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)
}
}
非常令人迷惑的一個操作，但就是解決了問題
小結
針對移動端彈窗下層頁面可被滑動的異常場景
本文介紹了4種常見解決方法，與1種"謎之操作"
demo截圖
