尝试使用 Hammerjs 以编程方式触发 WheelEvent

Question

我正在使用使用鼠标滚轮滚动的库 (https://github.com/asmyshlyaev177/react-horizontal-scrolling-menu)，我想在向左或向右滑动时使用此功能。

我正在使用 hammerjs 来复制 swipeleft 和 swiperight 行为，这是有效的。

但是，创建 WheelEvent 似乎不会触发依赖于 WheelEvent 的功能。

我现在使用 componentDidUpdate 作为我的 React 生命周期方法，因为出于某种原因 this.containerRef.current 在 componentDidMount 中总是 null，但是一旦我弄清楚背后的原因，我可能会移动它。

无论如何，这是我的代码：

componentDidUpdate() {
  if(this.containerRef.current !== null) {
    this.hammer = Hammer(this.containerRef.current)
    this.hammer.on('swiperight', () => alert("swipe right"));
    var wheelevent = new WheelEvent("wheel", {deltaX: 500, deltaY: 500});
    this.hammer.on('swiperight', () => window.dispatchEvent(wheelevent));
    }
}

现在我想指出，向右滑动的警报确实发生了，所以这个行为肯定会触发，但是我的 WheelEvent 没有被滚动库捕获。

我应该如何以编程方式触发 WheelEvent？

编辑 - 我写了一个代码笔：

https://codesandbox.io/s/react-horizontal-scrolling-menu-fi7tv

Answer 1

我的预感是问题与 Dragging 被禁用和活动被取消有关。

因此您需要将事件向下发送一点。我更新了下面有效的代码和框

https://codesandbox.io/s/react-horizontal-scrolling-menu-j46l8

更新后的代码部分如下

var elem = document.getElementsByClassName("menu-wrapper")[0];
this.hammer.on("swiperight", () => elem.dispatchEvent(wheeleventRight));
this.hammer.on("swipeleft", () => elem.dispatchEvent(wheeleventLeft));

您可能希望稍后以更具反应性的方式改进该方法。但这确实表明，一旦您以低阶元素发送事件，轮转就可以正常工作

尝试使用 Hammerjs 以编程方式触发 WheelEvent

Trying to trigger a WheelEvent programmatically with Hammerjs

reactjs

mousewheel

hammer.js