43

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.

1
  • 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.
    – SpYk3HH
    Commented Jan 16, 2012 at 21:10

5 Answers 5

62

The event object in a jQuery event handler does not reflect the real event. wheelDelta is a non-standard event propertyIE 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/

1
  • 3
    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!
    – user1382306
    Commented Dec 21, 2012 at 21:01
13
$.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 (:

4
  • 1
    Doesn't work in the latest Firefox. Found the delta tucked away here: if(e.originalEvent && e.originalEvent.deltaY) return e.originalEvent.deltaY * -40
    – mpen
    Commented Sep 27, 2013 at 15:52
  • @Mark fixed it, should work now.. i wish there was some kind universal delta by jquery, i hate this cross-browser stuff
    – psycho brm
    Commented Oct 3, 2013 at 9:47
  • 1
    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.
    – mpen
    Commented Oct 3, 2013 at 15:42
  • 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..
    – psycho brm
    Commented Oct 3, 2013 at 22:04
5
$(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 :(

0
3

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.

2
  • 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 😉
    – Mavelo
    Commented Oct 4, 2018 at 13:36
  • Updated to include event.originalEvent.deltaY for Firefox. Multiplied by 25 for speed since it was registering 1+/- for each wheel event.
    – Mavelo
    Commented Oct 4, 2018 at 13:47
2

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;
    }
}
2
  • "detail" doesn't appear to exist in the latest Firefox. It seems to be split into deltaX, Y and Z now.
    – mpen
    Commented Sep 27, 2013 at 15:53
  • 1
    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.
    – Timbergus
    Commented Feb 23, 2014 at 20:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.