有时候会用到鼠标滚轮事件，事实上用滚动鼠标滚轮操作某些类似需要拉动滚动条才能查看的内容时确实很便利。这款jQuery Mouse Wheel Plugin插件能够绑定任何元素，比如某个层。

事件效果：

代码：
/*! Copyright (c) 2013 Brandon Aaron ()
* Licensed under the MIT License (LICENSE.txt).
*
* Thanks to: for some pointers.
* Thanks to: Mathias Bank() for a scope bug fix.
* Thanks to: Seamus Leahy for adding deltaX and deltaY keleyi.com
*
* Version: 3.1.3
*
* Requires: 1.2.2+
*/

(function (factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['jquery'], factory);
} else if (typeof exports === 'object') {
// Node/CommonJS style for Browserify
module.exports = factory;
} else {
// Browser globals
factory(jQuery);
}
} (function ($) {

var toFix = ['wheel', 'mousewheel', 'DOMMouseScroll', 'MozMousePixelScroll'];
var toBind = 'onwheel' in document || document.documentMode >= 9 ? ['wheel'] : ['mousewheel', 'DomMouseScroll', 'MozMousePixelScroll'];
var lowestDelta, lowestDeltaXY;

if ($.event.fixHooks) {
for (var i = toFix.length; i; ) {
$.event.fixHooks[toFix[--i]] = $.event.mouseHooks;
}
}

$.event.special.mousewheel = {
setup: function () {
if (this.addEventListener) {
for (var i = toBind.length; i; ) {
this.addEventListener(toBind[--i], handler, false);
}
} else {
this.onmousewheel = handler;
}
},

teardown: function () {
if (this.removeEventListener) {
for (var i = toBind.length; i; ) {
this.removeEventListener(toBind[--i], handler, false);
}
} else {
this.onmousewheel = null;
}
}
};

$.fn.extend({
mousewheel: function (fn) {
return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
},

unmousewheel: function (fn) {
return this.unbind("mousewheel", fn);
}
});


function handler(event) {
var orgEvent = event || window.event,
args = [].slice.call(arguments, 1),
delta = 0,
deltaX = 0,
deltaY = 0,
absDelta = 0,
absDeltaXY = 0,
fn;
event = $.event.fix(orgEvent);
event.type = "mousewheel";

// Old school scrollwheel delta
if (orgEvent.wheelDelta) { delta = orgEvent.wheelDelta; }
if (orgEvent.detail) { delta = orgEvent.detail * -1; }

// New school wheel delta (wheel event)
if (orgEvent.deltaY) {
deltaY = orgEvent.deltaY * -1;
delta = deltaY;
}
if (orgEvent.deltaX) {
deltaX = orgEvent.deltaX;
delta = deltaX * -1;
}

// Webkit
if (orgEvent.wheelDeltaY !== undefined) { deltaY = orgEvent.wheelDeltaY; }
if (orgEvent.wheelDeltaX !== undefined) { deltaX = orgEvent.wheelDeltaX * -1; }

// Look for lowest delta to normalize the delta values
absDelta = Math.abs(delta);
if (!lowestDelta || absDelta < lowestDelta) { lowestDelta = absDelta; }
absDeltaXY = Math.max(Math.abs(deltaY), Math.abs(deltaX));
if (!lowestDeltaXY || absDeltaXY < lowestDeltaXY) { lowestDeltaXY = absDeltaXY; }

// Get a whole value for the deltas
fn = delta > 0 ? 'floor' : 'ceil';
delta = Math[fn](delta / lowestDelta);
deltaX = Math[fn](deltaX / lowestDeltaXY);
deltaY = Math[fn](deltaY / lowestDeltaXY);

// Add event and delta to the front of the arguments
args.unshift(event, delta, deltaX, deltaY);

return ($.event.dispatch || $.event.handle).apply(this, args);
}

}));



使用方法也相当简单：

有2种绑定该事件的方式，1、利用插件自身的mousewheel（）方法，2、jquery的bind（）方法

例如：
$('div.mousewheel_example').mousewheel(fn);
$('div.mousewheel_example').bind('mousewheel', fn);

// using bind
$('#my_elem').bind('mousewheel', function(event, delta) {
console.log(delta);
});

// using the event helper
$('#my_elem').mousewheel(function(event, delta) {
console.log(delta);
});

要注意的是回调函数的第二个参数delta，它响应滚轮的方向，当为负数时表示向下滚动，为正则表示向上滚动。