js怎么禁止页面滑动事件

在JavaScript中，如果你想要禁止页面的滚动，可以通过以下几种方法实现：

基础概念

页面滚动通常是由用户的鼠标滚轮操作或者触摸屏上的滑动操作触发的。通过JavaScript，我们可以监听这些事件并阻止它们的默认行为，从而达到禁止滚动的效果。

类型与应用场景

临时禁止滚动：例如，在打开模态框或全屏菜单时。
永久禁止滚动：适用于某些特定的应用场景，如单页应用的某些页面。

实现方法

方法一：使用CSS

通过设置overflow: hidden在body或html元素上，可以快速禁止滚动。

body.no-scroll {
  overflow: hidden;
}

然后在JavaScript中添加或移除这个类：

function disableScroll() {
  document.body.classList.add('no-scroll');
}

function enableScroll() {
  document.body.classList.remove('no-scroll');
}

方法二：监听事件并阻止默认行为

你可以监听wheel和touchmove事件，并在事件处理函数中调用event.preventDefault()来阻止滚动。

function preventDefault(e) {
  e.preventDefault();
}

function disableScroll() {
  window.addEventListener('wheel', preventDefault, { passive: false });
  window.addEventListener('touchmove', preventDefault, { passive: false });
}

function enableScroll() {
  window.removeEventListener('wheel', preventDefault);
  window.removeEventListener('touchmove', preventDefault);
}

注意：在某些浏览器中，{ passive: false }是必须的，否则preventDefault可能不会生效。

可能遇到的问题及解决方法

1. 页面仍然可以滚动

确保在添加事件监听时使用了{ passive: false }选项，并且在不需要禁止滚动时及时移除事件监听。

2. 触摸设备上的问题

在触摸设备上，可能需要额外处理touchmove事件，确保所有相关的滚动事件都被阻止。

3. 滚动位置的恢复

如果你在禁止滚动后需要恢复到之前的滚动位置，可以在禁止滚动前记录当前的滚动位置，并在恢复滚动时设置回去。

let scrollPosition = 0;

function disableScroll() {
  scrollPosition = window.pageYOffset;
  document.body.classList.add('no-scroll');
}

function enableScroll() {
  document.body.classList.remove('no-scroll');
  window.scrollTo(0, scrollPosition);
}

通过上述方法，你可以有效地控制页面的滚动行为，根据不同的应用场景选择合适的方法来实现需求。