阻止模態(tài)框打開(kāi)時(shí)頁(yè)面滾動(dòng)

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

這是因?yàn)槟B(tài)框只是頁(yè)面上的一個(gè)元素，它可能保持在原位，但頁(yè)面其余部分仍然正常運(yùn)行。

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

從簡(jiǎn)單的方案開(kāi)始

我們可以通過(guò)將整個(gè)body的高度設(shè)置為視口全高，并在模態(tài)框打開(kāi)時(shí)隱藏垂直溢出來(lái)大幅減少模態(tài)框打開(kāi)時(shí)頁(yè)面滾動(dòng)的問(wèn)題：

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

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

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

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

移動(dòng)端怎么辦？

此解決方案在桌面端和安卓移動(dòng)端效果都很好。但是，iOS Safari 需要更多處理，因?yàn)樵谟|摸屏上點(diǎn)擊和移動(dòng)時(shí)，模態(tài)框打開(kāi)時(shí)body仍然會(huì)滾動(dòng)。

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

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

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

糟糕！

因此我們需要使用JavaScript

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

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

增強(qiáng)固定body方法

我們正在使用的是：

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

如果我們知道滾動(dòng)的頂部位置并將其添加到我們的CSS中，那么body就不會(huì)滾動(dòng)回屏幕頂部，所以問(wèn)題解決了。我們可以使用JavaScript來(lái)計(jì)算滾動(dòng)頂部，并將該值添加到body樣式中：

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

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

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

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

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

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