event.wheelDelta returns undefined
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/
MouseWheel Event not working in IE?
Jquery doesn't pass along the IE event object. If you want the MS specific properties you have to use addeventlistener
instead of on
Binding mousewheel returns undefined
I think you'll have to do a little bit more work to get it working in all browsers - or try the jquery-mousewheel extension
If the extension still does not work properly, you might try this modified version 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 whether it works in other browsers. Usage:$('element').mousewheel(function(e, delta) { alert(delta); });
Mouse Wheel event always returns less than 0 (down) in firefox? [JQuery]
Add this before you condition :
var theEvent = e.originalEvent.wheelDelta || e.originalEvent.detail*-1
And you condition if ( theEvent /120 > 0)
*-1
is there because somehow, firefox reverse the scrolling value. wheel event javascript give inconsistent values
event.wheelDelta
is not defined in every browser, deprecated and should not been used anymore according to its Mozilla documention. You could use the values event.deltaX
and event.deltaY
. For further information, please refer to Mozilla wheel documentation.
I tested the following code in Google Chrome and Mozilla Firefox. The values are very different. Google Chrome always returns as event.deltaY
the value 100
or -100
. In Mozilla Firefox it always returns the values 3
or -3
.
document.addEventListener('wheel', function(event) {
console.log(event.deltaX, event.deltaY);
});
I would not rely onto the wheel value but rather listen to the scroll event like this is described on the Mozilla scroll documentation:var lastKnownScrollPosition = 0;
var ticking = false;
function doSomething(scrollPosition) {
console.log(scrollPosition);
}
window.addEventListener('scroll', function(e) {
lastKnownScrollPosition = window.scrollY;
if(!ticking) {
window.requestAnimationFrame(function() {
doSomething(lastKnownScrollPosition);
ticking = false;
});
}
ticking = true;
});
Related Topics
How to Sign into Google with Selenium Automation Because of "This Browser or App May Not Be Secure."
Why How to Not Throw Inside a Promise.Catch Handler
How to Find Out with Jquery If an Element Is Being Animated
Why Escape_JavaScript Before Rendering a Partial
Why Are Exceptions Used for Rejecting Promises in Js
How to Upload Preview Image Before Upload Through JavaScript
Can Promises Have Multiple Arguments to Onfulfilled
What Is Ngdefaultcontrol in Angular
Adding New Data to Firebase Users
How to Take Advantage of Callback Functions for Asynchronous Xmlhttprequest
Regular Expression for Ip Address Validation
How to Catch Jquery $.Getjson (Or $.Ajax with Datatype Set to 'JSONp') Error When Using JSONp
Using Fetch API to Access JSON
How to Read the Correct Time/Duration Values from Google Spreadsheet
How to Get the Focused Element with Jquery
JavaScript Remove "Disabled" Attribute from HTML Input