在模態打開時防止頁面滾動

阻止模態框打開時頁面滾動

你是否遇到過這種情況：打開一個模態框，在其中滾動，關閉它後，頁面卻跳轉到了其他位置？

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

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

從簡單的方案開始

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

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

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

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

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

移動端怎麼辦？

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

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

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

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

糟糕！

因此我們需要使用JavaScript

我們可以使用JavaScript來避免觸摸事件冒泡。我們都知道，模態框打開時應該有一個背景層。不幸的是，在iOS中，stopPropagation與觸摸事件配合使用有點尷尬。但是preventDefault效果很好。這意味著我們必須在模態框中包含的每個DOM節點中添加事件監聽器——不僅僅是在背景或模態框層上。好消息是，許多JavaScript庫都可以做到這一點，包括久經考驗的jQuery。

還有一件事：如果我們需要在模態框內部滾動呢？我們仍然需要觸發觸摸事件的響應，但是當到達模態框頂部或底部時，我們仍然需要阻止冒泡。這似乎非常複雜，所以我們還沒有完全解決問題。

增強固定body方法

我們正在使用的是：

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

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

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

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

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

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

搞定了！模態框打開時body不再滾動，並且在模態框打開和關閉時都保持滾動位置。萬歲！

以上是在模態打開時防止頁面滾動的詳細內容。更多資訊請關注PHP中文網其他相關文章！