javascript - 将 Window 对象上的鼠标滚轮事件更改为 {passive : false} - Javascript

Question

随着 Chrome 的最新更新[73]，他们改变了被动事件监听器与鼠标滚轮在窗口对象上的工作方式。基本上，这已经破坏了许多平滑滚动插件，这些插件在 Chrome 中滚动时消除了传统鼠标滚轮的默认“抖动”。

chrome 平台状态的变化在这里。

https://www.chromestatus.com/features#browsers.chrome.owners%3A%20sahel%40chromium.org

...在该页面上，它会将您带到页面，其中显示默认值现在等效于此:

`window.addEventListener("wheel", func, {passive: true} );`

所以我猜我需要编写一个函数将其更改为:

`window.addEventListener("wheel", func, {passive: false} );`

https://github.com/sahel-sh/Document-level-passive-wheel-event-listeners/blob/master/Explainer.md

我想将此作为一个独立的功能来执行，而不是通过我使用的插件的所有代码来尝试找出如何以及在何处执行此操作。

有人知道如何编写一个独立的函数来执行此操作吗？

我所做的一切似乎都不起作用。我该如何解决这个问题？

Answer 1

试试这个

const EVENTS_TO_MODIFY = ['touchstart', 'touchmove', 'touchend', 'touchcancel', 'wheel'];

const originalAddEventListener = document.addEventListener.bind();
document.addEventListener = (type, listener, options, wantsUntrusted) => {
  let modOptions = options;
  if (EVENTS_TO_MODIFY.includes(type)) {
    if (typeof options === 'boolean') {
      modOptions = {
        capture: options,
        passive: false,
      };
    } else if (typeof options === 'object') {
      modOptions = {
        ...options,
        passive: false,
      };
    }
  }

  return originalAddEventListener(type, listener, modOptions, wantsUntrusted);
};

const originalRemoveEventListener = document.removeEventListener.bind();
document.removeEventListener = (type, listener, options) => {
  let modOptions = options;
  if (EVENTS_TO_MODIFY.includes(type)) {
    if (typeof options === 'boolean') {
      modOptions = {
        capture: options,
        passive: false,
      };
    } else if (typeof options === 'object') {
      modOptions = {
        ...options,
        passive: false,
      };
    }
  }
  return originalRemoveEventListener(type, listener, modOptions);
};