使用 preventDefault 禁用鼠标滚轮但无法启用？

Question

我有 2 个按钮来启用/禁用鼠标滚轮，如下所示。我已禁用它，但我无法重新启用它

function disableScroll() {
  document.addEventListener("mousewheel", function(event) {
    event.preventDefault();
  }, {
    passive: false
  });
}

function enableScroll() {
  document.removeEventListener("mousewheel", function(event) {
    event.preventDefault();
  }, {
    passive: false
  });
}

<button onclick="disableScroll()">Disable</button>
<button onclick="enableScroll()">Enale</button>

Answer 1

您当前逻辑的问题是因为您添加的事件处理程序和您删除的事件处理程序不是同一个引用。为了解决这个问题，将事件处理程序放在它自己的命名函数中并引用它。

let disabledScrollHandler = (e) => {
  e.preventDefault();
}

document.querySelector('#disable').addEventListener('click', () => 
  document.addEventListener('mousewheel', disabledScrollHandler, { passive: false }));

document.querySelector('#enable').addEventListener('click', () => 
  document.removeEventListener('mousewheel', disabledScrollHandler, { passive: false }));

html,
body {
  height: 1000px;
}

<button id="disable">Disable</button>
<button id="enable">Enable</button>

也就是说，您可以通过向body 添加一个类来实现这一点，而无需嵌套和动态事件处理程序。这个class 设置了元素的overflow 状态，这反过来又阻止了滚动行为。试试这个：

document.querySelector('#disable').addEventListener('click', function() {
  document.body.classList.add('disable-scroll');
});

document.querySelector('#enable').addEventListener('click', function() {
  document.body.classList.remove('disable-scroll');
});

html, body { height: 1000px; }
body.disable-scroll { overflow: hidden; }

<button id="disable">Disable</button>
<button id="enable">Enable</button>

请注意，如果需要，后一种方法还可以防止通过键盘滚动。