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.
5 Answers
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/
-
3You'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!– user1382306Commented Dec 21, 2012 at 21:01
$.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 (:
-
1Doesn't work in the latest Firefox. Found the delta tucked away here:
if(e.originalEvent && e.originalEvent.deltaY) return e.originalEvent.deltaY * -40
– mpenCommented 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 Commented Oct 3, 2013 at 9:47
-
1Yeah, 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.– mpenCommented 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.. Commented Oct 3, 2013 at 22:04
$(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 :(
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.
-
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 😉– MaveloCommented 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.– MaveloCommented Oct 4, 2018 at 13:47
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;
}
}
-
"detail" doesn't appear to exist in the latest Firefox. It seems to be split into deltaX, Y and Z now.– mpenCommented Sep 27, 2013 at 15:53
-
1Hi 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. Commented Feb 23, 2014 at 20:45