建站
咨詢
售后
建站咨詢
新聞中心
當出現(xiàn)彈窗時，大部分場景下是期望彈窗下層頁面不能被滑動的。
我們提供的服務有：成都網站制作、成都做網站、外貿營銷網站建設、微信公眾號開發(fā)、網站優(yōu)化、網站認證、武陟ssl等。為上1000家企事業(yè)單位解決了網站和推廣的問題。提供周到的售前咨詢和貼心的售后服務，是有科學管理、有技術的武陟網站制作公司
當然也不期望彈窗被滑動
近期肝頁面又碰到了這個問題
下面介紹幾種最常用的方式，以及一些邊界情況與應對策略。
overflow:hidden
流傳最廣的方式就是 給元素設置 overflow:hidden
給body設置，就能達到阻止頁面滑動的目的
document.body.style.overflow = 'hidden'
document.body.style.overflow = 'visible'
大部分情況下這個是能有效果的
但在部分機器上，這個是不生效的:
彈窗遮罩
還有一種情況如下，頁面部分元素有局部滑動
當前情況給body設置 overflow:hidden依舊是無效果的
此時給彈窗加上遮罩如下，正常情況下，下層元素就不會收到touchmove事件
其中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
這個也是碰巧發(fā)現(xiàn)的，在iOS低端機將上述方式都嘗試后
仍發(fā)現(xiàn)一個問題，現(xiàn)象如下(TODO：補圖)
下層頁面不會被滑動了，但遮罩和彈窗整體還能被下拉
彈窗是一個下拉列表彈窗，其出現(xiàn)的位置需要動態(tài)的計算，如下結構
最終發(fā)現(xiàn)是由于style與class設置的樣式在這個機型上展示雖然一致
但實際交互起來的表現(xiàn)卻不一致
修復后的html結構如下,在元素里插入了一個style標簽，使用class選擇器與!important重載這個距離的樣式
代碼如下
{
onShow(){
setTimeout(() => {
const dialogEl = document.querySelector('.dialog')
if (!dialogEl) {
return
}
const style = document.createElement('style')
style.textContent = `
.dialog{
top:${dialogEl.style.top} !important;
}
`
dialogEl.append(style)
}, 200)
}
} 非常令人迷惑的一個操作，但就是解決了問題
小結
針對移動端彈窗下層頁面可被滑動的異常場景
本文介紹了4種常見解決方法，與1種"謎之操作"
demo演示 demo截圖
文章題目：移動端阻止彈窗下層頁面被滑動方法介紹
本文地址：http://www.5511xx.com/article/dphhsoi.html
