在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()函数来解除页面禁止滚动。

以上就是禁止和允许页面滚动的两种常用方法。根据具体的需求，你可以选择适合的方法来实现页面滚动的控制。