Question

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

我正在使用Hammerjs复制swipeleft和swiperight行为，并且可以正常工作。

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

我现在正在使用componentDidUpdate作为我的生命周期方法，因为出于某种原因，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

我的直觉是问题与package.json被禁用和事件被取消有关。

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

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

更新的代码部分在下面

Dragging

您可能想在以后以一种更具反应性的方式来改进方法。但这确实表明，一旦您以较低顺序的元素发送了事件，则转轮效果很好

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

1 个答案: