使用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>

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