js禁止、允许 页面滚动

js禁止页面有两种方式

禁止页面滚动：
document.body.style.overflow='hidden'
允许页面滚动：
document.body.style.overflow='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();
}

// 显示遮罩层
function showMask() {
  disableScroll(); // 禁止页面滚动
  // 显示遮罩层
  // ...
}

// 在点击显示遮罩层时，禁止页面滚动
function disableScroll() {
  document.body.style.overflow = 'hidden';
}

// 在关闭遮罩层时，解除页面禁止滚动
function enableScroll() {
  document.body.style.overflow = 'auto';
}

// 示例代码：
var maskElement = document.getElementById('mask'); // 假设遮罩层的元素id为 "mask"

// 点击显示遮罩层
function showMask() {
  maskElement.style.display = 'block';
  disableScroll(); // 禁止页面滚动
}

// 点击关闭遮罩层
function closeMask() {
  maskElement.style.display = 'none';
  enableScroll(); // 解除页面禁止滚动
}