Попытка программно запустить WheelEvent с помощью Hammerjs - PullRequest
Новая
       18

Попытка программно запустить WheelEvent с помощью Hammerjs

1 голос
/ 23 июня 2019

Я использую библиотеку (https://github.com/asmyshlyaev177/react-horizontal-scrolling-menu), которая прокручивает при использовании колесика мыши, и я хочу использовать эту функцию при перемещении влево или вправо.

Я использую hammerjs для репликации swipeleft иповедение swiperight, и это работает.

Однако создание WheelEvent, похоже, не вызывает функциональность, зависящую от WheelEvent.

В настоящее время я использую componentDidUpdate в качестве моего метода жизненного цикла реагирования, потому что дляпо какой-то причине this.containerRef.current всегда имеет значение null в componentDidMount, но как только я выясню причину этого, я, вероятно, переместлю его.

В любом случае, вот мой код: 

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

1 Ответ

2 голосов
/ 25 июня 2019

Я догадываюсь, что проблема связана с отключением 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));

Возможно, вы захотите улучшить подход, хотя в более реактивноммода позже.Но это показывает, что после того, как вы отправили событие в элементах более низкого порядка, вращение работает хорошо

...