鼠标滚动事件 - onmousewheel

1.Jquery-MouseWheel

　　jquery默认是不支持支持鼠标滚轮事件(mousewheel)

　　jquery MouseWheel下载：https://github.com/jquery/jquery-mousewheel/blob/master/jquery.mousewheel.js

　　然后就可以使用mousewheel和unmousewheel事件函数了

　　

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

　　Jquery MouseWheel兼容性

• 　　FireFox浏览器使用DOMMouseScroll事件,其他（包括IE6）都是使用onmousewheel事件；
• 　　FireFox中wheelDelta判断滚动方向，其值为120/-120，为负数的时候表示向下滚动，整数的时候向上滚动
• 　　其他：detail（属性）判断方向，返回值是3的整数倍(3/-3), 为正数表示向上滚动，负数向下滚动
• 　　opera:同时拥有wheelDelta和detail,其中“detail”属性返回值和FF中的wheelDelta相同

　　使用实例

 1 // jquery 兼容的滚轮事件
 2 $(document).on("mousewheel DOMMouseScroll", function (e) {
 3
 4     var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) ||  // chrome & ie
 5                 (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1));              // firefox
 6
 7
 8     if (delta > 0) {
 9         // 向上滚
10         console.log("wheelup");
11     } else if (delta < 0) {
12         // 向下滚
13         console.log("wheeldown");
14     }
15 });

2.使用js原生实现滚轮事件

　　但是考虑到兼容性

IE下通过attachEvent实现事件监听

　　Chrome和FF通过addEventListener来实现事件监听

　　但是FF滚轮事件是：DOMAMouseSrcoll

　　其他浏览器：onmousewheel

	事件监听	滚轮事件
Chrome	addEventListener	onmousewheel
IE	attachEvent	onmousewheel
FF	addEventListener	DOMAMouseSrcoll

　

所以我自己封装了一个兼容各浏览器的方法

　

 addEvent: function(obj, xEvent, fn) {
     if (obj.attachEvent) {
         obj.attachEvent('on' + xEvent, fn);
     } else {
         obj.addEventListener(xEvent, fn, false);
     }
 },

调用：

 this.addEvent($(document),"mousewheel",callback);　　//其他
 this.addEvent($(document),"DOMMouseScroll",callback); //FF