阻止模態(tài)框打開時頁面滾動

你是否遇到過這種情況：打開一個模態(tài)框，在其中滾動，關(guān)閉它後，頁面卻跳轉(zhuǎn)到了其他位置？

這是因為模態(tài)框只是頁面上的一個元素，它可能保持在原位，但頁面其餘部分仍然正常運行。

有時這無關(guān)緊要，例如屏幕高度正好等於視口高度的情況。但在其他情況下，就會出現(xiàn)滾動問題。好消息是，我們可以通過一些CSS（和JavaScript）技巧來防止這種情況。

從簡單的方案開始

我們可以通過將整個body的高度設(shè)置為視口全高，並在模態(tài)框打開時隱藏垂直溢出來大幅減少模態(tài)框打開時頁面滾動的問題：

 <code>body.modal-open { height: 100vh; overflow-y: hidden; }</code>

這很好，但是如果我們在打開模態(tài)框之前已經(jīng)滾動過頁面元素，就會出現(xiàn)輕微的水平重排。視口寬度會增加大約15像素，這正是滾動條的寬度。讓我們稍微調(diào)整一下body的右填充來避免這種情況。

 <code>body { height: 100vh; overflow-y: hidden; padding-right: 15px; /* 避免寬度重排*/ }</code>

請注意，模態(tài)框的高度必須小於視口高度才能使此方法有效。否則，body上的滾動條將是必要的。

移動端怎麼辦？

此解決方案在桌面端和安卓移動端效果都很好。但是，iOS Safari 需要更多處理，因為在觸摸屏上點擊和移動時，模態(tài)框打開時body仍然會滾動。

我們可以將body設(shè)置為固定定位作為解決方法：

 <code>body { position: fixed; }</code>

現(xiàn)在可以了！觸摸屏幕時，body將不會響應(yīng)。但是，這裡仍然存在一個“小”問題。假設(shè)模態(tài)框觸發(fā)器在頁面下方，我們點擊打開它。很好！但是現(xiàn)在我們自動滾動到屏幕頂部，這與我們試圖解決的滾動行為一樣令人困惑。

糟糕！

因此我們需要使用JavaScript

我們可以使用JavaScript來避免觸摸事件冒泡。我們都知道，模態(tài)框打開時應(yīng)該有一個背景層。不幸的是，在iOS中，stopPropagation與觸摸事件配合使用有點尷尬。但是preventDefault效果很好。這意味著我們必須在模態(tài)框中包含的每個DOM節(jié)點中添加事件監(jiān)聽器——不僅僅是在背景或模態(tài)框?qū)由稀：孟⑹?，許多JavaScript庫都可以做到這一點，包括久經(jīng)考驗的jQuery。

還有一件事：如果我們需要在模態(tài)框內(nèi)部滾動呢？我們?nèi)匀恍枰|發(fā)觸摸事件的響應(yīng)，但是當(dāng)?shù)竭_(dá)模態(tài)框頂部或底部時，我們?nèi)匀恍枰柚姑芭?。這似乎非常複雜，所以我們還沒有完全解決問題。

增強固定body方法

我們正在使用的是：

 <code>body { position: fixed; }</code>

如果我們知道滾動的頂部位置並將其添加到我們的CSS中，那麼body就不會滾動回屏幕頂部，所以問題解決了。我們可以使用JavaScript來計算滾動頂部，並將該值添加到body樣式中：

 // 模態(tài)框顯示時，我們需要一個固定的body
document.body.style.position = 'fixed';
document.body.style.top = `-${window.scrollY}px`;

// 模態(tài)框隱藏時，我們需要保持在滾動位置的頂部document.body.style.position = '';
document.body.style.top = '';

這有效，但是模態(tài)框關(guān)閉後仍然存在一點洩漏。具體來說，當(dāng)模態(tài)框打開且body設(shè)置為fixed時，頁面似乎已經(jīng)丟失了其滾動位置。因此我們必須檢索位置。讓我們修改我們的JavaScript來解決這個問題。

 // 模態(tài)框隱藏時...
const scrollY = document.body.style.top;
document.body.style.position = '';
document.body.style.top = '';
window.scrollTo(0, parseInt(scrollY || '0') * -1);

搞定了！模態(tài)框打開時body不再滾動，並且在模態(tài)框打開和關(guān)閉時都保持滾動位置。萬歲！

以上是在模態(tài)打開時防止頁面滾動的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！