Обнаружение нового события колеса мыши - PullRequest
Новая
       9

Обнаружение нового события колеса мыши

0 голосов
/ 22 ноября 2018

Я использую следующий прослушиватель событий для определения колеса мыши и направления прокрутки: 

window.addEventListener('wheel', ({ deltaY }) => {
  console.log(deltaY);
  if (deltaY > 0) scrollDown();
  else if (deltaY < 0) scrollUp();
});

Здесь происходит следующее:

  • * прокрутка сенсорной панелью двумя пальцами на Macbook запускаетобработчик событий
  • deltaY ведет запись из-за акселерометра прокрутки
  • scrollDown() или scrollUp() продолжает работать, пока не остановится акселерометрзапускать scrollUp и scrollDown один раз за взаимодействие с пользователем.Поэтому мне нужно обнаруживать новое событие прокрутки мыши, а не каждые события прокрутки мыши.Возможно ли это?

    Я попытался установить тайм-аут, чтобы определить, все ли меняется deltaY из-за акселерометра, но этого было недостаточно, потому что, если он все еще менялся, второе взаимодействие с пользователем не вызывало scrollUp или scrollDown.

    Вот кодовая ручка того, чего я пытаюсь достичь: https://codepen.io/anon/pen/dQmPNN

    Это очень близко к необходимой функциональности, но если вы сильно ударите колесом мышина первом слайде, затем попытайтесь сразу перейти к следующему, решение для тайм-аута блокирует его, поэтому вам придется подождать еще секунду или около того, пока тайм-аут не закончится, и вы сможете продолжить прокрутку.

Ответы [ 2 ]

0 голосов
/ 22 ноября 2018

Мы можем избежать такой ситуации, задержав выполнение и удалив события между задержками, см. Пример ниже и добавили 1000 мс как задержку, которую можно изменить в зависимости от ваших требований. 

        let scrollPage = (deltaY)=>{
        console.log(deltaY);
        if (deltaY > 0) scrollDown();
        else if (deltaY < 0) scrollUp();
        };

        var delayReg;
        window.addEventListener('wheel', ({ deltaY }) => {
            clearTimeout(delayReg);
            delayReg = setTimeout(scrollPage.bind(deltaY),1000);
        });
0 голосов
/ 22 ноября 2018

Вы пробовали разбить это на функции с флагом, чтобы проверить, произошло ли взаимодействие?

Например: 

// Create a global variable which will keep track of userInteraction
let shouldScroll = true;

// add the event listener, and call the function when triggered
window.addEventListener('wheel', () => myFunction());

//Create a trigger function, checking if shouldScroll is true or false.
myFunction(){
    shouldScroll ? (
        if (deltaY > 0) scrollDown();
        else if (deltaY < 0) scrollUp();
        // Change back to false to prevent further scrolling. 
        shouldScroll = false;
    ) : return;
}

/* call this function when user interaction occurs
 and you want to allow scrolling function  again.. */
userInteraction(){
    // set to true to allow scrolling
    shouldScroll = true;
}
...