建站
咨詢
售后
建站咨詢
新聞中心
當(dāng)出現(xiàn)彈窗時(shí)，大部分場景下是期望彈窗下層頁面不能被滑動(dòng)的。
我們提供的服務(wù)有：成都網(wǎng)站制作、成都做網(wǎng)站、外貿(mào)營銷網(wǎng)站建設(shè)、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、武陟ssl等。為上1000家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的武陟網(wǎng)站制作公司
當(dāng)然也不期望彈窗被滑動(dòng)
近期肝頁面又碰到了這個(gè)問題
下面介紹幾種最常用的方式，以及一些邊界情況與應(yīng)對(duì)策略。
overflow:hidden
流傳最廣的方式就是 給元素設(shè)置 overflow:hidden
給body設(shè)置，就能達(dá)到阻止頁面滑動(dòng)的目的
document.body.style.overflow = 'hidden'
document.body.style.overflow = 'visible'
大部分情況下這個(gè)是能有效果的
但在部分機(jī)器上，這個(gè)是不生效的:
彈窗遮罩
還有一種情況如下，頁面部分元素有局部滑動(dòng)
當(dāng)前情況給body設(shè)置 overflow:hidden依舊是無效果的
此時(shí)給彈窗加上遮罩如下，正常情況下，下層元素就不會(huì)收到touchmove事件
其中inset屬性是left,top,right,bottom的簡寫
但在部分機(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);
}
}在彈窗打開時(shí)直接阻止目標(biāo)元素的滑動(dòng)事件的默認(rèn)行為
彈窗內(nèi)容是不可滑動(dòng)的話，那么這種方法是最省事高效的
如果彈窗中有可滑動(dòng)的內(nèi)容，且滑動(dòng)的內(nèi)容比較復(fù)雜
那么通過touchmove去細(xì)力度的控制阻止滑動(dòng)事件時(shí)就很麻煩
position:fixed
還有一種常用的就是position:fixed
在彈窗打開時(shí)，將目標(biāo)元素進(jìn)行固定，在關(guān)閉時(shí)恢復(fù)
由于定位會(huì)改變?cè)卦陧撁嫔系奈恢茫孕枰趂ixed前記錄元素的位置
取消fixed之后將元素又滾動(dòng)到原來的位置
// 彈窗的事件
{
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è)問題，現(xiàn)象如下(TODO：補(bǔ)圖)
下層頁面不會(huì)被滑動(dòng)了，但遮罩和彈窗整體還能被下拉
彈窗是一個(gè)下拉列表彈窗，其出現(xiàn)的位置需要?jiǎng)討B(tài)的計(jì)算，如下結(jié)構(gòu)
最終發(fā)現(xiàn)是由于style與class設(shè)置的樣式在這個(gè)機(jī)型上展示雖然一致
但實(shí)際交互起來的表現(xiàn)卻不一致
修復(fù)后的html結(jié)構(gòu)如下,在元素里插入了一個(gè)style標(biāo)簽，使用class選擇器與!important重載這個(gè)距離的樣式
代碼如下
{
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)
}
} 非常令人迷惑的一個(gè)操作，但就是解決了問題
小結(jié)
針對(duì)移動(dòng)端彈窗下層頁面可被滑動(dòng)的異常場景
本文介紹了4種常見解決方法，與1種"謎之操作"
demo演示 demo截圖
新聞標(biāo)題：移動(dòng)端阻止彈窗下層頁面被滑動(dòng)方法介紹
本文路徑：http://m.5511xx.com/article/dphhsoi.html
