Коврик для мыши запускает слишком много «колесных» событий в JavaScript

Question

Я пытаюсь обнаружить события «колеса» на веб-странице, чтобы перехватить их, и вместо этого внедрить постраничную прокрутку.

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

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

Прокрутка до страницы 2 Пауза 500 мс Прокрутка до страницы 3 Пауза 500 мс Прокрутка до страницы 4

Регистрация событий в консоли показывает, что 3 события «колеса» запускаются и обрабатываются.... как будто мое регулирование не работает, вместо этого между каждым событием вставляется пауза.

Answer 1

Дроссель, кажется, просто наваливается на события прокрутки.

Я бы сделал это примерно так: jsfiddle

По сути, прослушиватель событий для колеса мыши, и при его срабатывании существует тайм-аут на x миллисекунд, пока он не может быть запущен снова..

let canScroll = true;
let marginTop = 10;
const element = $('#custom');
window.addEventListener('mousewheel', (event) => {
    if (canScroll) {
    if (event.deltaY > 0) {
      marginTop += 10;
    } else {
      marginTop -= 10;
    }
    element.css('margin-top', marginTop + 'px');
    canScroll = false;
    setTimeout(() => {
      canScroll = true;
    }, 1000);
  }
});