在Web開發中，有時候我們需要控制頁面是否可以滾動。本文將介紹兩種常用的方法來禁止和允許頁面滾動，分別是直接操作頁面樣式和通過事件監聽器阻止默認行為。

方法一：直接操作頁面樣式

禁止頁面滾動：

復制代碼document.body.style.overflow = 'hidden';

允許頁面滾動：

復制代碼document.body.style.overflow = 'visible';

這種方法通過直接修改頁面的樣式來控制滾動，將overflow屬性設置為hidden可以禁止頁面滾動，設置為visible可以允許頁面滾動。

方法二：通過事件監聽器阻止默認行為

復制代碼// 禁止頁面滾動function disableScroll() {  document.body.addEventListener('touchmove', preventDefault, { passive: false });}// 允許頁面滾動function enableScroll() {  document.body.removeEventListener('touchmove', preventDefault, { passive: false });}// 阻止touchmove事件的默認行為function preventDefault(event) {  event.preventDefault();}

這種方法通過添加或移除事件監聽器來阻止touchmove事件的默認行為，從而禁止或允許頁面滾動。在需要禁止頁面滾動的時候，調用disableScroll()函數；在需要允許頁面滾動的時候，調用enableScroll()函數。

示例代碼

下面是一個示例代碼，演示了如何在點擊顯示遮罩層時禁止頁面滾動，在關閉遮罩層時解除頁面禁止滾動：

復制代碼var maskElement = document.getElementById('mask'); // 假設遮罩層的元素id為 "mask"// 點擊顯示遮罩層function showMask() {  maskElement.style.display = 'block';  disableScroll(); // 禁止頁面滾動}// 點擊關閉遮罩層function closeMask() {  maskElement.style.display = 'none';  enableScroll(); // 解除頁面禁止滾動}

在上述代碼中，當點擊顯示遮罩層時，調用disableScroll()函數來禁止頁面滾動；當點擊關閉遮罩層時，調用enableScroll()函數來解除頁面禁止滾動。

以上就是禁止和允許頁面滾動的兩種常用方法。根據具體的需求，你可以選擇適合的方法來實現頁面滾動的控制。