四種防止模態(tài)框彈出時(shí)頁面滾動(dòng)的方法
讓我們面對(duì)現(xiàn)實(shí)吧，可怕的“滾動(dòng)離開”時(shí)刻——當(dāng)用戶點(diǎn)擊模式時(shí)，整個(gè)頁面卻繼續(xù)向下滾動(dòng)，這種尷尬的情況！這會(huì)打亂流程，讓用戶感到沮喪，并帶來不太好的體驗(yàn)。
但不要害怕，各位小伙伴！為了防止這種常見的網(wǎng)站煩惱比您想象的要容易。以下是4種久經(jīng)考驗(yàn)的方法，每種方法都有自己的優(yōu)點(diǎn)和缺點(diǎn)：
1. Overflow:hidden — 經(jīng)典方法
overflow:hidden CSS 屬性是一種久經(jīng)考驗(yàn)的防止?jié)L動(dòng)的方法。只需將一個(gè)類（例如，no-scroll）添加到 <body> 標(biāo)簽，并將其鏈接到帶有 overflow:hidden 的 CSS 規(guī)則。
.no-scroll {
overflow: hidden;
}當(dāng)模態(tài)框彈出時(shí)，使用 JavaScript 添加此類，并在模態(tài)框關(guān)閉時(shí)將其刪除。此方法會(huì)停止?jié)L動(dòng)并隱藏滾動(dòng)條。
2. Position: Fixed — 修復(fù)程序
想要在模態(tài)框彈出時(shí)保持頁面原位？position: fixed 可以提供幫助！
向<body> 添加 no-scroll 之類的類并應(yīng)用以下 CSS：
.no-scroll {
position: fixed;
width: 100%;
}這會(huì)將頁面錨定到視口，保持其原始寬度。請(qǐng)記住確保您的模態(tài)框具有適當(dāng)?shù)母叨?，否則內(nèi)容可能會(huì)被截?cái)唷?/span>
3. 滾動(dòng)事件 — JavaScript 大師
對(duì)于更注重 JavaScript 的方法，我們可以使用滾動(dòng)事件在模態(tài)框出現(xiàn)時(shí)禁用滾動(dòng)。
document.addEventListener('scroll', disableScroll);
function disableScroll() {
window.scrollTo(0, 0);
}當(dāng)模式關(guān)閉時(shí)，刪除事件監(jiān)聽器以重新啟用滾動(dòng)。此方法不需要更改 CSS，并且在桌面和移動(dòng)設(shè)備上都能很好地工作。
4. Overscroll-Behavior：Contain — 現(xiàn)代選擇
準(zhǔn)備好采用更現(xiàn)代的方法了嗎？overscroll-behavior 屬性可以控制頁面邊緣的滾動(dòng)行為。
.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overscroll-behavior: contain;
}通過將其設(shè)置為包含，可以阻止頁面滾動(dòng)，但允許在模式本身內(nèi)滾動(dòng)。請(qǐng)記住在模式關(guān)閉時(shí)刪除此屬性。
總結(jié)，請(qǐng)選擇合適的武器
這 4 種方法都提供了在模式彈出時(shí)，阻止頁面滾動(dòng)的不同方法。再具體項(xiàng)目開發(fā)時(shí)，我們需要選擇適合自己項(xiàng)目的情況，來匹配項(xiàng)目的需要，不能隨意選擇。
