event wheeldelta returns undefined

event wheeldelta returns undefined  using -'javascript,jquery,scroll'

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.

asked Sep 9, 2015 by VerenaMertzp
0 votes

4 Answers

0 votes

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.


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

answered Sep 9, 2015 by CouWrenford
0 votes
$.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) {
').text(e.delta)); });

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

answered Sep 9, 2015 by HomSadlier
0 votes

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;
answered Sep 9, 2015 by AshleeFarwel
0 votes
$(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!


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

answered Sep 9, 2015 by OnaN84sxubqv