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.

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/

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 (: