Binding wheel returns undefined

I am testing the following code:

$(window).bind('mousewheel', function(e) {
  alert(e.wheelDelta);
});

      

Every time I move the mouse, I get "undefined". Can anyone help with this as I am trying to grab the mouse wheel and move the div based on that.

+3


source to share


3 answers


I think you'll have to do a bit of work to get it to work in all browsers, or try the jquery-mousewheel extension

If the extension still doesn't work as expected, you can try this modified version that I created a while ago:

/* jquery.mousewheel.min.js
 * Copyright (c) 2009 Brandon Aaron (http://brandonaaron.net)
 * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
 * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
 * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
 * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
 *
 * Version: 3.0.2
 * 
 * Requires: 1.2.2+
 */
(function(c) {
    var a = [ "DOMMouseScroll", "mousewheel" ];
    c.event.special.mousewheel = {
        setup : function() {
            if (this.addEventListener) {
                for ( var d = a.length; d;) {
                    this.addEventListener(a[--d], b, false)
                }
            } else {
                this.onmousewheel = b
            }
        },
        teardown : function() {
            if (this.removeEventListener) {
                for ( var d = a.length; d;) {
                    this.removeEventListener(a[--d], b, false)
                }
            } else {
                this.onmousewheel = null
            }
        }
    };
    c.fn.extend({
        mousewheel : function(d) {
            return d ? this.bind("mousewheel", d) : this.trigger("mousewheel")
        },
        unmousewheel : function(d) {
            return this.unbind("mousewheel", d)
        }
    });
    function b(f) {
        var d = [].slice.call(arguments, 1), g = 0, e = true;
        if (f.wheelDelta) {
            g = f.wheelDelta / 120
        }
        if (f.detail) {
            g = -f.detail / 3
        }
        // I had to move the following two lines down, probably because of jQuery update
        f = c.event.fix(f || window.event);
        f.type = "mousewheel";
        f.pageX = f.originalEvent.pageX;
        f.pageY = f.originalEvent.pageY;
        d.unshift(f, g);
        return c.event.handle.apply(this, d)
    }
})(jQuery);

      



I just tested it in Firefox and Chrome, but I don't know if it works in other browsers. Using:

$('element').mousewheel(function(e, delta) { alert(delta); });

      

+2


source


I ended up using the following snippet:

jQuery(function($) {
$(document)
        .bind('mousewheel', function(event, delta) {
        if(delta > 0) {
                    // Scrolling down
        } else {
                    // Scrolling up
        }
    });
});

      



This requires the jQuery mousewheel extension and works in IE, Firefox and Chrome.

+2


source


I had the same problem and the solution was to change the jquery version from 1.7.x to 1.9.x

0


source







All Articles