JavaScript技巧之禁止頁面滾動

一、禁止頁面滾動是哪些場景下需要用到？

在某些場景下，我們需要禁止頁面的滾動效果，比如彈出一個對話窗口或者是展示一個新的頁面元素等。如果不禁止頁面滾動，則可能會影響用戶的體驗，導致頁面元素的錯亂等問題。

那麼禁止頁面滾動的場景主要包含以下兩種：

1. 在頁面上展示一個新的元素，例如彈窗提示、輪播圖等，為了防止用戶在元素展示過程中會誤操作、造成卡頓等情況發生，需要禁止頁面滾動；

2. 移動端頁面在滾動到某一元素時，元素的 fixed 定位可能會受到影響，出現錯位等問題，為了避免這種情況的出現，需要禁止頁面滾動，確保元素的正常展現。

二、如何禁止頁面滾動

在JavaScript中，我們可以通過以下兩種方法來禁止頁面的滾動效果：

1. 阻止默認行為

window.addEventListener('touchmove', function (e) {
  e.preventDefault();
}, { passive: false });

上述代碼中，我們使用addEventListener()方法為’touchmove’事件添加了一個事件監聽函數，該函數中使用preventDefault()方法阻止了當前事件的默認行為，從而避免了頁面滾動的情況。

2. 控制overflow

document.body.style.overflow = 'hidden'

使用上述代碼可以通過控制頁面的 ‘overflow’ 屬性來禁止頁面的滾動效果，其中 ‘hidden’ 表示隱藏滾動條。需要注意的是，該代碼只適用於PC端，對於移動端則需要另行處理。

三、如何還原頁面滾動

在完成了需要禁止頁面滾動的操作後，如果需要恢復頁面的滾動效果，我們可以通過以下方式實現：

1. 恢復默認行為

window.removeEventListener('touchmove', function (e) {
  e.preventDefault();
}, { passive: false });

使用addEventListener()方法添加的事件監聽函數，我們可以使用removeEventListener()方法進行移除，從而實現恢復默認行為的目的。

2. 控制overflow

document.body.style.overflow = 'auto'

通過將 ‘overflow’ 屬性重新設置為 ‘auto’，我們可以實現頁面滾動的恢復。同樣需要注意的是，該代碼只適用於PC端，對於移動端則需要另行處理。

四、注意事項

在使用上述方法來禁止頁面滾動時，我們需要格外注意以下幾點：

1. 注意兼容性，尤其是在移動端；

2. 在禁止頁面滾動之後，需要及時恢復頁面滾動，以免對用戶體驗造成影響；

3. 在添加和移除監聽函數時，需要向對應的方法中傳遞同一個具有唯一標識的函數引用。