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