Mousewheel——响应跨浏览器的鼠标滚轮事件

华宰 发布于 2011/03/28 16:11
阅读 3K+
收藏 5

用于添加跨浏览器的鼠标滚轮支持。

使用mousewheel事件有以下两种方式:

  • 使用mousewheel和unmousewheel事件函数;
  • 使用经典的bind和unbind函数。
$('div.mousewheel_example').mousewheel(fn);
$('div.mousewheel_example').bind('mousewheel', fn);

mousewheel事件的处理函数有一点小小的变化,它除了第一个参数event外,还接收到第二个参数delta。通过参数delta可以获取鼠标滚轮的方向和速度。如果delta的值是负的,那么滚轮就是向下滚动,正的就是向上。

以下是示例的源代码:

jQuery(function($) {
    $('div.mousewheel_example')
        .bind('mousewheel', function(event, delta) {
            var dir = delta > 0 ? 'Up' : 'Down',
                vel = Math.abs(delta);
            $(this).text(dir + ' at a velocity of ' + vel);
            return false;
        });
});

下载

可以从GitHub下载其他版本

使用

要使用这个功能,只需对目标元素的’mousewheel’事件绑定事件处理函数即可。

Mousewheel插件还提供了两个事件函数:mousewheel和unmousewheel,可以对目标元素调用这两个函数,并在参数中指定回调函数。

事件的回调函数第一个参数为event,第二个参数为delta,代表鼠标滚轮的变化值。

以下是上面两种使用方式的示例:

// 绑定方式
$('#my_elem').bind('mousewheel', function(event, delta) {
    console.log(delta);
});

// 事件函数方式
$('#my_elem').mousewheel(function(event, delta) {
    console.log(delta);
});
加载中
返回顶部
顶部