События типа: wheelup, wheeldown

107

30 июня 2022, 02:00

Необходимо отслеживать прокрутку колесика мыши: вверх или вниз. При этом сам элемент не скроллится. Как это можно реализовать? Нашел один интересный вариант, но он работает только в случае с прокруткой элемента:

document.querySelector('.carousel').addEventListener('scroll', function(ev) {
    console.log("scroll event");
    const el = ev.target;
    const direction = el.scrollTop() > (el.data('scrollTop') || 0) ? "down" : "up";
    el.data('scrollTop', el.scrollTop());
    console.log('scrolling', direction);
}, { capture: true });

.carousel {
  width: 200px;
  height: 200px;
  overflow: hidden;
  border: 1px dashed red;
}

<div class="carousel">carousel</div>

Под прокруткой элемента подразумевается возможность проскроллить его содержание.

Я понимаю, что события отслеживаются по взаимодействию с документом, поэтому задача кажется невыполнимой. Буду рад любому костылю!

Answer 1

Думаю это то что вам нужно.

document.addEventListener("wheel",function(e){
    e.preventDefault();
    if(e.deltaY < 0) console.log("wheelUp");
    else console.log("wheelDown");
},{passive: false})

Дальше сами :)

Answer 2

window.addEventListener('scroll', function(e) {
  console.log(this.oldScroll > this.scrollY);
  this.oldScroll = this.scrollY;
})
//для того чтобы можно было поскролить
for (let i = 0; i < 100; i++) {
  document.write('<div>scroll</div>')
}

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Неверно работает код php, ajax

Когда нажимаю на звездочку второй записи, чтобы добавить в избранное, добавляется перваяВ чем может быть проблема? вывожу через цикл while Добавляю...

223

javascript

Проблема с UnrealBloomPass

Просто решил накинуть свечение на уткуСо стороны 'UnrealBloomPass

157

javascript

Invalid hook call при работе с localStorage

Имеется 3 файла:

208

javascript

Выполнение параллельных запросов при обращение к API (AXIOS, JS)

Разрабатываю приложение на JS и есть необходимость обращения к api для получения записейНо Api накладывает ограничение на количество одновременно...

251