event.wheelDelta returns undefined

Question

So I'm trying to disable scrolling on my page when my lightbox opens, and I found this really usefull script that does exactly that. (http://jsfiddle.net/mrtsherman/eXQf3/3/), unfortunately, when I use it on my own page, it disabled scrolling in my lightbox as well. I started to debug the code with alerts only to find out that event.wheelDelta returns "undefined" on my page, while in the JSFiddle, it returns -120.

Kilowatthour

I've had a similar issue and it came down to dom namespacing. Could you show some code, or just check your names and id's again, the answer for you maybe there. – Glyptics

Answer 1

The event object in a jQuery event handler does not reflect the real event. wheelDelta is a non-standard event property^{IE and Opera}, available through the originalEvent property of the jQuery event.

In jQuery 1.7+, the detail property is not available at the jQuery Event object. So, you should also use event.originalEvent.detail to for this property at the DOMMouseScroll event. This method is backwards-compatible with older jQuery versions.

event.originalEvent.wheelDelta

Demo: http://jsfiddle.net/eXQf3/22/
See also: http://api.jquery.com/category/events/event-object/

Percolation

You're a genius! I've looked at so many other solutions, and your fiddle is the only one that gets to the root and actually works! – Bullish

Answer 2

$.fn.wheel = function (callback) {
    return this.each(function () {
        $(this).on('mousewheel DOMMouseScroll', function (e) {
            e.delta = null;
            if (e.originalEvent) {
                if (e.originalEvent.wheelDelta) e.delta = e.originalEvent.wheelDelta / -40;
                if (e.originalEvent.deltaY) e.delta = e.originalEvent.deltaY;
                if (e.originalEvent.detail) e.delta = e.originalEvent.detail;
            }

            if (typeof callback == 'function') {
                callback.call(this, e);
            }
        });
    });
};

and use like this:

$('body').wheel(function (e) {
    e.preventDefault();
    $('#myDiv').append($('<div>').text(e.delta));
});

big thx to @Mark for jquery-fying the function (:

Exactitude

Doesn't work in the latest Firefox. Found the delta tucked away here: if(e.originalEvent && e.originalEvent.deltaY) return e.originalEvent.deltaY * -40 – Byelaw

@Mark fixed it, should work now.. i wish there was some kind universal delta by jquery, i hate this cross-browser stuff – Exactitude

Yeah, I'm not sure why this wouldn't be in the jQuery core. I made a function out of it: jsfiddle.net/mnbayazit/uTbGp/3 Works in FF and Chrome, haven't got it to work in IE8 yet. – Byelaw

Nice, do you mind if I replace code in my answer with yours wheel function? It's much more elegant. Or go ahead and edit my answer.. – Exactitude

Answer 3

$(this).on('mousewheel DOMMouseScroll', function(e){

  var dat = $(e.delegateTarget).data(); //in case you have set some, read it here.
  var datx = dat.x || 0; // just to show how to get specific out of jq-data object

  var eo = e.originalEvent;
  var xy = eo.wheelDelta || -eo.detail; //shortest possible code
  var x = eo.wheelDeltaX || (eo.axis==1?xy:0);
  var y = eo.wheelDeltaY || (eo.axis==2?xy:0); // () necessary!
  console.log(x,y);

});

works in Webkit and FF, can not proof IE here :(

Duala

Answer 4

When I need WheelDelta, I pass the event along to this little gem...

function getWheelDelta(event) {
    return event.wheelDelta || -event.detail || event.originalEvent.wheelDelta || -event.originalEvent.detail || -(event.originalEvent.deltaY * 25) || null;
}

Example jQuery where I used it to obtain the delta for scrolling elements with the overflow:hidden CSS rule...

$('#parent-id').on('wheel mousewheel DOMMouseScroll', function(event) {
    var node = $('#child-id');
    node.prop('scrollTop', parseFloat(node.prop('scrollTop')) - (getWheelDelta(event) / 2));
    return false;
});

Note: Reverse scroll direction by adding delta instead of subtracting like example above.

Amalekite

Noticed somebody said similar event didn't work in FF. Confirmed in my code as well. Will update getWheelDelta as soon as I have a confirmed solution 😉 – Amalekite

Updated to include event.originalEvent.deltaY for Firefox. Multiplied by 25 for speed since it was registering 1+/- for each wheel event. – Amalekite

Answer 5

I have tried your solution, psycho brm, and I have changed the function extractDelta(e) to make it works in Firefox. Instead of e.detail I have used e.originalEvent.detail because Firefox returned an undefined delta. I have uploaded the solution and my test code to this post. I hope it helps.

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

Southwesterly

"detail" doesn't appear to exist in the latest Firefox. It seems to be split into deltaX, Y and Z now. – Byelaw

Hi Mark. I have just tested this code in Firefox 27.0.1 on Mac and I have check the event returned by the mouse wheel. It still contains inside, the "originalEvent" element and inside it, you can find the "detail" element. I have been checking it value and it still works. If you move the wheel backward and forward it change its sign, and it changes its value depending on the speed of he wheel. I have obtained normal values: 1, -1, 2, -1, -4, 1... I don't know where exactly you have found the problem. – Southwesterly