如何使用纯JavaScript实现鼠标滚轮滚动计数器？

核心实现思路 #

• 监听页面的wheel事件，通过事件对象的deltaY属性判断滚动方向：deltaY > 0代表向下滚动，deltaY < 0代表向上滚动
• 不要依赖固定的deltaY数值（不同设备、浏览器的滚轮步长数值可能不同，比如触控板滚动的deltaY会更小且不固定）
• 维护一个计数变量，根据滚动方向直接增减数值

修正后的代码示例 #

// 初始化滚动计数为0
let scrollCount = 0;

// 绑定滚轮事件监听
window.addEventListener('wheel', (event) => {
  if (event.deltaY > 0) {
    // 向下滚动，计数加1
    scrollCount += 1;
  } else if (event.deltaY < 0) {
    // 向上滚动，计数减1
    scrollCount -= 1;
  }
  // 可选：打印当前计数用于调试
  console.log('当前滚动计数:', scrollCount);
});

原代码的问题说明 #

1. 硬编码deltaY值不可靠：固定判断deltaY === 100或-100不符合实际情况，不同设备的滚轮触发的deltaY数值差异很大
2. 逻辑不符合需求：原代码里的if (mouseWheel > 0)这类判断会限制计数的正常增减，违背了"向下滚动就加1、向上就减1"的要求
3. 缺少事件绑定：原代码没有将逻辑绑定到wheel事件上，无法触发计数逻辑

内容的提问来源于stack exchange，提问作者Mikita Malashevich