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

Question

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

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 来实现这一点，而无需嵌套和动态事件处理程序。 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>

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

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

Disable mousewheel with preventDefault but can not enable it?

html

javascript

jquery

preventdefault