js全局监听鼠标上下滑动

最新推荐文章于 2025-10-17 14:08:34 发布

原创最新推荐文章于 2025-10-17 14:08:34 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #chrome

该代码段定义了一个函数windowAddMouseWheel，用于全局监听鼠标的滚轮事件。它通过检测wheelDelta值判断滚动方向，当wheelDelta大于0时，表示鼠标滚轮向上滚动；反之，当wheelDelta小于0时，表示向下滚动。函数通过添加事件监听器到document和window对象，兼容Firefox、IE、Opera和Chrome等浏览器。

全局监听鼠标上下滑动的方法

    windowAddMouseWheel() {
      const scrollFunc = function (e) {
        e = e || window.event;
        let wheelDelta=e.wheelDelta?e.wheelDelta:(-e.detail*50)
        if (wheelDelta > 0) {
          console.log(wheelDelta+"滑轮向上滚动");
        }
        if (wheelDelta < 0) {
          console.log(wheelDelta+"滑轮向下滚动");
        }
      };
      //给页面绑定滑轮滚动事件
      if (document.addEventListener) { //火狐使用DOMMouseScroll绑定
        document.addEventListener('DOMMouseScroll', scrollFunc, false);
      }
      //其他浏览器直接绑定滚动事件
      window.onmousewheel = document.onmousewheel = scrollFunc;//IE/Opera/Chrome
    }