События типа: wheelup, wheeldown
112
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>')
}
-
17:01
-
11:24
-
10:16
-
17:54
-
22:01
-
13:03
-
12:54
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
-
21:25
-
07:04
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 47560 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30496 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23630 visits
- Как через css изменить цвет png изображения? 10349 visits
- Blob video url download 9958 visits
- Php curl запрос через прокси с авторизацией 9210 visits
- Работа с captcha vk api 8094 visits
© "hostciti.net" 23.11.2024 | 21:58