jQuery和JavaScript鼠标滚轮事件监听

鼠标滚轮的监听，其实是前端开发中一个挺常见的需求，尤其是你想做点交互小动画、滚动控制的时候。jQuery 和原生 JS 都能搞定，思路都差不多，但写法上有点区别。jQuery 用起来确实省事点，事件名写全点，兼容性也顾上了。

jQuery 的监听方式比较直接，基本上用.on('mousewheel DOMMouseScroll')就能兼容主流浏览器。Firefox 有点另类，用DOMMouseScroll这个老名字。不过你只要写两个事件名一块监听，问题就了。

来个例子你就清楚了：

$(document).ready(function() {
  $('body').on('mousewheel DOMMouseScroll', function(event) {
    var delta = event.originalEvent.wheelDelta || (-event.originalEvent.detail);
    if (delta > 0) {
      console.log('向上滚动');
    } else {
      console.log('向下滚动');
    }
    event.preventDefault();
  });
});

嗯，这段代码挺实用，控制滚动方向也挺清晰。wheelDelta是老朋友了，Chrome 和 IE 都认，detail则是 Firefox 专用。为了不让页面自己乱滚，event.preventDefault()最好带上。

原生 JavaScript 监听稍微麻烦点，主要是写法上得多考虑点浏览器兼容，尤其是 Firefox 总喜欢搞特殊：

document.addEventListener('DOMContentLoaded', function() {
  var body = document.body;
  body.addEventListener('mousewheel', handleWheel, false);
  body.addEventListener('DOMMouseScroll', handleWheel, false);

function handleWheel(event) {
    var delta = 0;
    if (!event) event = window.event;
    if (event.wheelDelta) {
      delta = event.wheelDelta;
    } else if (event.detail) {
      delta = -event.detail * 3;
    }
if (delta > 0) {
      console.log('向上滚动');
    } else {
      console.log('向下滚动');
    }
if (event.preventDefault) event.preventDefault();
    event.returnValue = false;
  }
});

写起来略啰嗦，但好处是不用引 jQuery，轻量不少。你如果在做一些对性能比较挑剔的页面，这种写法还挺合适。

提醒一句：如果你在做滚动相关的交互，一定要多测浏览器兼容性。尤其像 IE8 这种老家伙，还有 Firefox，测试下事件名是不是起效重要。