Mousewheel.js 鼠标滑轮跨浏览器 jQuery 兼容插件

Question

jQuery Mousewheel 是一个添加跨浏览器的鼠标滚轮支持的插件，使用这个插件，简单的绑定鼠标滑轮事件，无需考虑浏览器的兼容问题，他还提供了其他两个参数用于更好的处理用户的滑轮事件，通过参数我们可以判断滚动的方向和距离。

安装方法

Using with Browserify

Support for browserify is baked in.

npm install jquery-mousewheel
npm install jquery-browserify

In your server-side node.js code:

var express = require('express');
var app = express.createServer();

app.use(require('browserify')({
    require : [ 'jquery-browserify', 'jquery-mousewheel' ]
}));

In your browser-side javascript:

var $ = require('jquery-browserify');
require('jquery-mousewheel')($);

下载源文件

你也可以到官方网站下载压缩包，然后解压到你的项目中即可。

使用方法

1、首先我们引入需要的插件文件。

<script src="jquery.min.js"></script>
<script src="jquery-mousewheel.js"></script>

为了监听滚轮事件，该插件引入了 mousewheel 事件，所以我们可以监听元素的 mousewheel 事件

2、mousewheel 事件的处理函数有一点小小的变化，它除了第一个参数event 外，还接收到第二个参数delta。 通过参数delta可以获取鼠标滚轮的方向和速度，如果delta的值是负的即 -1，那么滚轮就是向下滚动，正的 1 就是向上。 所以，我们可以编写如下的代码：

// using on
$('#my_elem').on('mousewheel', function(event) {
    console.log(event.deltaX, event.deltaY, event.deltaFactor);
});

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

注意：回调函数中添加三个参数（delta, deltaX, and deltaY）的方式已经过时，将在后面的版本中删除。

Github地址：https://github.com/brandonaaron/jquery-mousewheel