Как создать счетчик прокрутки колесика мыши
Как я могу посчитать прокрутку мыши, используя чистый JS?
Пример:
значение по умолчанию: 0
прокрутите вниз: ++1
прокрутить вверх: --1
Я пытался сделать это, используя deltaY и переключатель.
let mouseWheel = 0;
switch (deltaY) {
case 100:
if (mouseWheel > 0) {
mouseWheel += 1;
} else if (mouseWheel < 0) {
mouseWheel = 0;
}
break;
case -100:
if (mouseWheel > 0) {
mouseWheel -= 1;
} else if (mouseWheel < 0) {
mouseWheel = 0;
}
break;
default:
break;
}
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Вы можете использовать событие wheel , чтобы обнаружить изменения колесика мыши и соответственно добавить/вычесть счетчик.
В моем примере предполагается, что вы проверяете только вертикальную прокрутку (т. е. изменение deltaY). Не стесняйтесь вносить изменения в код, если вам также нужно проверить горизонтальную прокрутку.
Я думаю, вы не хотите жестко запрограммировать изменение deltaY (например, 100 или -100), потому что разные люди могли настроить разную величину прокрутки, и это нарушит ваше утверждение switch.
const containerEle = document.querySelector("#container")
let mouseWheelCounter = 0;
containerEle.addEventListener("wheel", (wheel) => {
if (wheel.deltaY > 0) {
mouseWheelCounter++;
}else{
mouseWheelCounter--;
}
console.info(mouseWheelCounter)
})
Вот пример с JSFiddle
- Получите deltaY от WheelEvent
- Используйте Math.sign(), чтобы получить соответствующее значение
-1или1. - Используйте Math.max(), чтобы предотвратить значения ниже
0
let mouseWheel = 0;
addEventListener("wheel", (evt) => {
mouseWheel += Math.sign(evt.deltaY); // Add or subtract 1
mouseWheel = Math.max(0, mouseWheel); // Prevent negative value
console.info(mouseWheel);
});Scroll down and upКак уже говорили другие, вы ищете событие колесо.
Это событие прослушивает вращение колеса мыши (или других указательных устройств), а затем позволяет вам получить доступ к его свойству deltaY, которое сообщает вам, «как далеко» прокрутил пользователь.
Вы также можете использовать deltaMode, чтобы убедиться, что вы используете правильные единицы измерения.
let mouseWheel = 0;
window.addEventListener('wheel', function(event) {
if (event.deltaY > 0) {
mouseWheel ++; // scroll down
} else if (event.deltaY < 0) {
mouseWheel--; // scroll up
}
console.info(count);
}, false);