提问人：Mikita Malashevich 提问时间：10/6/2023 最后编辑：Roko C. BuljanMikita Malashevich 更新时间：10/7/2023 访问量：81
如何创建鼠标滚轮滚动计数器
How to create mouse wheel scroll counter
问：
如何使用纯 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;
}
答：
1赞
terahertz
10/6/2023
#1
您可以使用滚轮事件来检测鼠标滚轮的变化，并相应地添加/减去计数器。
我的示例假设您只检查垂直滚动（即 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.log(mouseWheelCounter)
})
下面是 JSFiddle 的示例
1赞
Roko C. Buljan
10/7/2023
#2
- 从 WheelEvent 获取
deltaY - 使用 Math.sign（） 获取相应的 or 值
-11 - 使用 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.log(mouseWheel);
});Scroll down and up
-1赞
Reabon
10/7/2023
#3
正如其他人之前所说，您正在寻找车轮事件。
此事件侦听鼠标滚轮（或其他指针设备）上的旋转，然后允许您访问其属性，该属性告诉您用户滚动了“多远”。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.log(count);
}, false);
评论