如何在chrome中启用鼠标滚轮？

Question

当我将页面滚动到特殊块时，我使用 javascript 禁用鼠标滚轮。 我使用了很多方法，但它们都在 Firefox 中工作，而不是在 chrome 中。 对于 chrome，我找到了一种带有 preventDefault 的特殊方法。 但我不知道如何启用它们。 这是代码：

const options = {
    rootMargin: "-400px"
};

const observer = new IntersectionObserver(function (entries, observer) {
    entries.forEach(entry => {
        console.log(entry.isIntersecting);
        if (entry.isIntersecting === true) {
            document.querySelector('body').classList.add('fixed');
            document.body.addEventListener('wheel', function (e) {
                e.preventDefault();
            }, {passive: false});

            $('html, body').animate({
                scrollTop: scrollCenter
            }, 1000);

            setTimeout(function () {
                document.querySelector('body').classList.remove('fixed');
                document.body.addEventListener('wheel', function (e) {
                    // override prevented flag to prevent jquery from discarding event
                    e.isDefaultPrevented = function () {
                        return false;
                    }
                });
            }, 1000);

        }
    });
}, options);

observer.observe(produtsBlock);

感谢您的帮助。

Answer 1

堆叠一个侦听器以使先前的侦听器无效是很棘手的，因为它们是按 FIFO 顺序触发的。

一些选项：

1。移除监听器

您可以在这段时间之后移除阻塞监听器。

使用命名函数：

const prevent = (e) => e.preventDefault();
document.body.addEventListener('wheel', prevent, { passive: false });

您可以在之后删除它：

setTimeout(function () {
  document.querySelector('body').classList.remove('fixed');
  document.body.removeEventListener('wheel', prevent);
}, 1000);

2。使用标志

使用状态标志来处理preventDefault。

const state = { prevent: true };

const prevent = (e) => {
  if (state.prevent) {
    e.preventDefault();
  }
};

document.body.addEventListener("wheel", prevent, { passive: false });

然后改变标志：

setTimeout(function () {
  document.querySelector("body").classList.remove("fixed");
  state.prevent = false;
}, 1000);