码迷,mamicode.com
首页 > 其他好文 > 详细

鼠标滚动事件 - onmousewheel

时间:2016-08-18 14:11:31      阅读:122      评论:0      收藏:0      [点我收藏+]

标签:

1.Jquery-MouseWheel

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

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

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

  

1 $(‘div.mousewheel_example‘).mousewheel(fn);    
2 $(‘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

 

 

 

 

 

 

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

 

1 addEvent: function(obj, xEvent, fn) {
2     if (obj.attachEvent) {
3         obj.attachEvent(‘on‘ + xEvent, fn);
4     } else {
5         obj.addEventListener(xEvent, fn, false);
6     }
7 },

调用:

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

 

鼠标滚动事件 - onmousewheel

标签:

原文地址:http://www.cnblogs.com/thonrt/p/5783518.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!