CODEWITHSUNDEEP
jquery
Daniel
Daniel

Reputation: 241

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.

How can I fix this? What I want to do is to check if the user is scorlliing upwards, or if he´s scrolling downwards.

Thanks for your help!

Upvotes: 4

Views: 14120

Answers (4)

Matthieu Chavigny
Matthieu Chavigny

Reputation: 218

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);

Upvotes: 5

Timbergus
Timbergus

Reputation: 3253

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.

Upvotes: 9

dlchambers
dlchambers

Reputation: 3752

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

Upvotes: 1

Shadow Wizard
Shadow Wizard

Reputation: 66389

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.

Upvotes: 1

Related Questions