Problems with mousewheel in jQuery

问题:

I have the following code in the head-section:

<script type='text/javascript' src='/js/jquery.mousewheel.min.js'></script>  jQuery(function($) {     $('#box').bind('mousewheel', function(event, delta) {         var dir = delta > 0 ? 'Up' : 'Down',         vel = Math.abs(delta);         alert(dir + ' at a velocity of ' + vel);         return false;     }); }); 

In firefox 5 nothing happens at all. In Chrome 13 and IE 9 I get "Down at a velocity of NaN", no matter at which direction I scroll.

Thanks for your help!

回答1:

It means that delta is undefined which probably means you didn't include the proper plugin, or included it in the wrong place.

Don't know what you download, I've tried now with this and it's working fine.

If you remove the external resource, it won't work as happens in your case.

回答2:

Not working either with new jQuery 2.0.1... well, it works but not as desired. This code only detect down movement (that means negative delta). I have tried this code and the result is always negative:

var num = 0;  $('#container').bind('mousewheel DOMMouseScroll',function(e, delta) {     if(delta > 0) {         $("#output").text(++num);     } else {         $("#output").text(--num);     }      e.stopPropagation();     e.preventDefault(); }); 

The DOMMouseScroll is the same as mousewheel but for Firefox.

CORRECTION

I have found this new code in this post and now it's working in Chrome and Firefox (I have fixed it) with jQuery 2.0.1. The problem was that the delta value returned was undefined.

function extractDelta(e) {     if (e.wheelDelta) {         return e.wheelDelta;     }      if (e.originalEvent.detail) {         return e.originalEvent.detail * -40;     }      if (e.originalEvent && e.originalEvent.wheelDelta) {         return e.originalEvent.wheelDelta;     } }  var num = 0;  $('#container').bind('mousewheel DOMMouseScroll',function(e) {     var d = extractDelta(e);      if(d > 0) {         $("#output").text(++num);     } else {         $("#output").text(--num);     }      e.stopPropagation();     e.preventDefault(); }); 

Container and output are just two empty divs.

回答3:

Here is a cross-browser solution:

var onMouseWheel = function(e) {     e = e.originalEvent;     var delta = e.wheelDelta>0||e.detail<0?1:-1;     alert(delta); } $("body").bind("mousewheel DOMMouseScroll", onMouseWheel); 

回答4:

Works fine with jQuery 1.6.x, but does NOT work with jQuery 1.7.x
Seems like something broke in jQuery.

文章来源: Problems with mousewheel in jQuery