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

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

禁止頁面滾動：

復制代碼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()函數。

示例代碼

下面是(shi)一個示(shi)例代碼，演(yan)示(shi)了如何(he)在(zai)點擊顯示(shi)遮(zhe)罩(zhao)層時禁(jin)止頁面滾(gun)動(dong)，在(zai)關閉遮(zhe)罩(zhao)層時解除頁面禁(jin)止滾(gun)動(dong)：

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

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

以(yi)上就是禁(jin)止(zhi)和允許(xu)頁面滾(gun)(gun)動(dong)的(de)兩種常用方法(fa)。根(gen)據具體(ti)的(de)需(xu)求，你可以(yi)選擇適合的(de)方法(fa)來實現頁面滾(gun)(gun)動(dong)的(de)控制。