在Web開發(fā)中，有時(shí)候我們需要控制頁(yè)面是否可以滾動(dòng)。本文將介紹兩種常用的方法來(lái)禁止和允許頁(yè)面滾動(dòng)，分別是直接操作頁(yè)面樣式和通過(guò)事件監(jiān)聽器阻止默認(rèn)行為。

方法一：直接操作頁(yè)面樣式

禁止頁(yè)面滾動(dòng)：

復(fù)制代碼document.body.style.overflow = 'hidden';

允許頁(yè)面滾動(dòng)：

復(fù)制代碼document.body.style.overflow = 'visible';

這種方法通過(guò)直接修改頁(yè)面的樣式來(lái)控制滾動(dòng)，將overflow屬性設(shè)置為hidden可以禁止頁(yè)面滾動(dòng)，設(shè)置為visible可以允許頁(yè)面滾動(dòng)。

方法二：通過(guò)事件監(jiān)聽器阻止默認(rèn)行為

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

這種方法通過(guò)添加或移除事件監(jiān)聽器來(lái)阻止touchmove事件的默認(rèn)行為，從而禁止或允許頁(yè)面滾動(dòng)。在需要禁止頁(yè)面滾動(dòng)的時(shí)候，調(diào)用disableScroll()函數(shù)；在需要允許頁(yè)面滾動(dòng)的時(shí)候，調(diào)用enableScroll()函數(shù)。

示例代碼

下面是一個(gè)示例代碼，演示了如何在點(diǎn)擊顯示遮罩層時(shí)禁止頁(yè)面滾動(dòng)，在關(guān)閉遮罩層時(shí)解除頁(yè)面禁止?jié)L動(dòng)：

復(fù)制代碼var maskElement = document.getElementById('mask'); // 假設(shè)遮罩層的元素id為 "mask"// 點(diǎn)擊顯示遮罩層function showMask() {  maskElement.style.display = 'block';  disableScroll(); // 禁止頁(yè)面滾動(dòng)}// 點(diǎn)擊關(guān)閉遮罩層function closeMask() {  maskElement.style.display = 'none';  enableScroll(); // 解除頁(yè)面禁止?jié)L動(dòng)}

在上述代碼中，當(dāng)點(diǎn)擊顯示遮罩層時(shí)，調(diào)用disableScroll()函數(shù)來(lái)禁止頁(yè)面滾動(dòng)；當(dāng)點(diǎn)擊關(guān)閉遮罩層時(shí)，調(diào)用enableScroll()函數(shù)來(lái)解除頁(yè)面禁止?jié)L動(dòng)。

以上就是禁止和允許頁(yè)面滾動(dòng)的兩種常用方法。根據(jù)具體的需求，你可以選擇適合的方法來(lái)實(shí)現(xiàn)頁(yè)面滾動(dòng)的控制。