У меня есть страница с несколькими полноэкранными блоками, и я хочу прикрепить прослушиватель событий колеса, который плавно прокручивает к следующему / предыдущему блоку. Я хочу что-то очень похожее на fullpage. js на самом деле.
Поэтому я создал пользовательскую функцию, чтобы предотвратить запуск события несколько раз или когда анимация прокрутки не закончена. Это довольно просто и хорошо работает с Chrome:
let scrolled = true
function scroll (e) {
if (scrolled) {
scrolled = false
const videos = document.querySelectorAll('video')
const videoIndex = e.target.getAttribute("data-index") - 1
try {
if (e.deltaY >= 0)
videos[videoIndex + 1].scrollIntoView({behavior : 'smooth'})
else if (e.deltaY < 0)
videos[videoIndex - 1].scrollIntoView({behavior : 'smooth'})
}
catch {}
setTimeout(_ => scrolled = true , 500)
}
}
window.addEventListener('wheel', scroll)
Проблема, однако, заключается в том, что debounce, похоже, не работает с Firefox. Он отлично работает при использовании моей мыши, но с трекпадом он генерирует событие более одного раза, прокручивая его несколькими блоками, а не одним, как в Chrome. Кажется, что Firefox прослушивает несколько событий колесика, запущенных трекпадом, даже после выполнения функции, тогда как Chrome слушает ее только один раз.
Я также пытался использовать функцию debounce от Loda sh , но я сталкиваюсь с точно такой же проблемой.
У кого-нибудь есть идеи, как решить эту проблему? Если это поможет, я использую Windows 10, а моя Firefox версия - 75.0.