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

发布于 2019-01-01 字数 2139 浏览 844 评论 0

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

如果你对这篇文章有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助。

扫码二维码加入Web技术交流群

您暂时不能评论!

管理员开启了需要登录才能够评论,你可以免费注册一个本站的账号。

还没有评论!

目前还没有任何评论,快来抢沙发吧!