鼠标滚轮事件----jquery-mousewheel

62 阅读 0 评论 41 点赞

我是靠谱客的博主欢呼月亮，最近开发中收集的这篇文章主要介绍鼠标滚轮事件----jquery-mousewheel，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1.浏览器兼容性问题

Firefox 鼠标滚轮向上滚动是-3，向下滚动是3
IE 鼠标滚轮向上滚动是120，向下滚动是-120
Safari 鼠标滚轮向上滚动是360，向下滚动是-360
Opera 鼠标滚轮向上滚动是120，向下滚动是-120
Chrome 鼠标滚轮向上滚动是120，向下滚动是-120

2.jquery-mousewheel

jquery插件默认是不支持鼠标中轮滚轮事件的，现在我们可以用于添加跨浏览器的鼠标滚轮支持可以使用jquery的Mousewheel插件。

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

使用mousewheel和unmousewheel事件函数；

使用经典的bind和unbind函数。

[javascript] 
view plain
copy
 $('div.mousewheel_example').mousewheel(fn);    
 $('div.mousewheel_example').bind('mousewheel', fn);    

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

以下是示例的源代码：

[javascript] 
view plain
copy
 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;    
         });    
 });    

jquery的鼠标滚轮插件 Mousewheel下载

从GitHub下载其他版本。

1.使用实例


var divTwo = $('.divTwo');
//1.禁用div的滚轮事件
$('.divTwo').mousewheel(function (e) {
return false;
});
//2.如果滚动条到底底部的时候 禁用window的滚轮滚动
//3.判断滚动的方向
divTwo.mousewheel(function (e, delta) {
var decoration = delta > 0 ? 'Up' : 'down';
$('.divFixed').text(decoration);
var scrollTop = divTwo.scrollTop();
var scrollHegiht = divTwo[0].scrollHeight;
var height = divTwo.height();
//滚动条 到底部且 滚轮向下滚动
if (scrollTop + height >= scrollHegiht && delta < 0) {
e.preventDefault();
}
//滚动条 到顶部 且滚轮向上
else if (scrollTop == 0 && delta > 0) {
e.preventDefault();
}
});
$(document).mousewheel(function (e, delta) {
$('.divFixed').text(delta);
});