js 禁止全屏滚动

在JavaScript中禁止全屏滚动通常涉及到对页面滚动行为的控制。以下是一些基础概念和相关解决方案：

基础概念

全屏滚动：指的是用户可以通过鼠标滚轮、触摸板或触摸屏等方式在整个页面上进行滚动。
事件监听：JavaScript可以通过监听特定的事件（如wheel、touchmove）来控制滚动行为。

解决方案

方法一：使用CSS

通过设置CSS属性overflow: hidden可以禁止页面的滚动。

html, body {
  overflow: hidden;
  height: 100%;
}

方法二：使用JavaScript阻止默认行为

通过监听wheel和touchmove事件，并调用preventDefault方法来阻止默认的滚动行为。

document.addEventListener('wheel', function(event) {
  event.preventDefault();
}, { passive: false });

document.addEventListener('touchmove', function(event) {
  event.preventDefault();
}, { passive: false });

方法三：条件禁止滚动

有时候你可能只想在特定条件下禁止滚动，比如在某个模态框打开时。可以通过添加和移除事件监听器来实现。

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

function enableScroll() {
  document.removeEventListener('wheel', preventDefault, { passive: false });
  document.removeEventListener('touchmove', preventDefault, { passive: false });
}

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

// 使用示例
disableScroll(); // 禁止滚动
// 当需要恢复滚动时
enableScroll(); // 允许滚动