禁止蒙層底部頁面跟隨滾動

2021-09-11 14:14:56 字數 2421 閱讀 7630

彈窗是一種常見的互動方式,而蒙層是彈窗必不可少的元素,用於隔斷頁面與彈窗區塊,暫時阻斷頁面的互動。但是,在蒙層元素中滑動的時候,滑到內容的盡頭時,再繼續滑動,蒙層底部的頁面會開始滾動,顯然這不是我們想要的效果,因此需要阻止這種行為。

那麼,如何阻止呢?請看以下分析:

overflow: hidden;

height: 100%;

複製**

在某些機型下,你可能還需要給根節點新增樣式:

overflow: hidden;

複製**

優點:簡單方便,只需新增css樣式,沒有複雜的邏輯。

缺點:相容性不好,適用於pc,移動端就尷尬了。 部分安卓機型以及safari中,無法無法阻止底部頁面滾動。

如果需要應用於移動端,那麼你可能需要方案二。

就是利用移動端的touch事件,來阻止預設行為(這裡可以理解為頁面滾動就是預設行為)。

// node為蒙層容器dom節點

node.addeventlistener('touchstart', e => , false)

複製**

簡單粗暴,滾動時底部頁面也無法動彈了。假如你的蒙層內容不會有滾動條,那麼上述方法prefect。

但是,最怕空氣突然安靜,假如蒙層內容有滾動條的話,那麼它再也無法動彈了。因此我們需要寫一些js邏輯來判斷要不要阻止預設行為,複雜程度明顯增加。

具體思路:判定蒙層內容是否滾動到盡頭,是則阻止預設行為,反之任它橫行。

tip:這裡我發現了乙個小技巧,可以省略不少**。在一次滑動中,若蒙層內容可以滾動,則蒙層內容滾動,過程中即使蒙層內容已滾至盡頭,只要不鬆手(可以理解為`touchend`事件觸發前),繼續滑動時頁面內容不會滾動,此時若鬆手再繼續滾動,則頁面內容會滾動。利用這乙個小技巧,我們可以精簡優化我們的**邏輯。

示例**如下:

"page">

頁面頁面"btn">開啟蒙層

頁面 "container">

"layer">

"content">

蒙層蒙層蒙層

複製**

body 

.btn

.container

.layer

.content

複製**

const btnnode = document.queryselector('.btn')

const containernode = document.queryselector('.container')

const layernode = document.queryselector('.layer')

const contentnode = document.queryselector('.content')

let starty = 0 // 記錄開始滑動的座標,用於判斷滑動方向

let status = 0 // 0:未開始,1:已開始,2:滑動中

// 開啟蒙層

btnnode.addeventlistener('click', () => , false)

// 蒙層部分始終阻止預設行為

layernode.addeventlistener('touchstart', e => , false)

// 核心部分

contentnode.addeventlistener('touchstart', e => , false)

contentnode.addeventlistener('touchmove', e =>

// 已經到低部盡頭了還要向下滑動,阻止它

if ((st === sh - ch) && starty > py)

}, false)

contentnode.addeventlistener('touchend', e => , false)

複製**

問題雖然是解決了,但是回頭來看,複雜程度和**量明顯增加了乙個梯度。 本著簡單方便的原則,我們是不是還可以探索其他的方案呢?

既然touch事件判定比較複雜,何不跳出這個框框,另闢蹊徑,探索更加合適的方案。 於是,便有了我們的方案三。

來講講我的思路,既然我們要阻止頁面滾動,那麼何不將其固定在視窗(即position: fixed),這樣它就無法滾動了,當蒙層關閉時再釋放。 當然還有一些細節要考慮,將頁面固定視窗後,內容會回頭最頂端,這裡我們需要記錄一下,同步top值。

示例**:

let bodyel = document.body

let top = 0

function stopbodyscroll (isfixed) else

}複製**

禁止蒙層底部頁面跟隨滾動

彈窗是一種常見的互動方式,而蒙層是彈窗必不可少的元素,用於隔斷頁面與彈窗區塊,暫時阻斷頁面的互動。但是,在蒙層元素中滑動的時候,滑到內容的盡頭時,再繼續滑動,蒙層底部的頁面會開始滾動,顯然這不是我們想要的效果,因此需要阻止這種行為。那麼,如何阻止呢?請看以下分析 overflow hidden he...

移動端蒙層底部頁面禁止滑動

蒙層 蒙層居中,且底部div禁止滑動。container style 因為不同螢幕高度不同,且字型大小不同content高度也不同,所以高度在js中控制。用 代替document.queryselector,節省重複 var function selector 彈出框 function show p...

HTML JS 彈層後底部頁面禁止滾動處理

1.開啟新頁面時需要禁止滑鼠滾輪,禁止頁面滑動 12 34在呼叫顯示層時加上這句js 就可以了 document.documentelement.style.overflow hidden 關閉層的時間別忘了在加上這句 document.documentelement.style.overflow ...