Get mouse wheel events in jQuery

Question

Is there a way to get the mouse wheel events  not talking about scroll events  in jQuery

User · Answer

I was stuck in this issue today and found this code is working fine for me      content   on  mousewheel   function event          console log event deltaX  event deltaY  event deltaFactor       if event deltaY  gt  0          console log  scroll up          else         console log  scroll down

User · Answer

Here is a vanilla solution  Can be used in jQuery if the event passed to the function is event originalEvent which jQuery makes available as property of the jQuery event  Or if inside the callback function under we add before first line  event   event originalEvent   This code normalizes the wheel speed amount and is positive for what would be a forward scroll in a typical mouse  and negative in a backward mouse wheel movement  Demo  http   jsfiddle net BXhzD  var wheel   document getElementById  wheel     function report ammout        wheel innerHTML    wheel ammout      ammout     function callback event        var normalized      if  event wheelDelta            normalized    event wheelDelta   120 - 0     -0   event wheelDelta   120   event wheelDelta   12        else           var rawAmmount   event deltaY   event deltaY   event detail          normalized   - rawAmmount   3   rawAmmount   10   rawAmmount   3             report normalized      var event    onwheel  in document    wheel     onmousewheel  in document    mousewheel     DOMMouseScroll   window addEventListener event  callback    There is also a plugin for jQuery  which is more verbose in the code and some extra sugar  https   github com brandonaaron jquery-mousewheel

User · Answer

document  ready function            foo   bind  mousewheel   function e           if e originalEvent wheelDelta  120  gt  0                console log  scrolling up                        else              console log  scrolling down

User · Answer

my combination looks like this  it fades out and fades in on each scroll down up  otherwise you have to scroll up to the header  for fading the header in   var header       header        content-container   bind  mousewheel   function e       if e originalEvent wheelDelta  gt  0            if  header data  faded                  header data  faded   0  stop true  fadeTo 800  1                       else          if   header data  faded    header data  faded   1  stop true  fadeTo 800  0               the above one is not optimized for touch mobile  I think this one does it better for all mobile   var iScrollPos   0  var header       header        content-container   scroll function           var iCurScrollPos     this  scrollTop        if  iCurScrollPos  gt  iScrollPos            if   header data  faded    header data  faded   1  stop true  fadeTo 800  0          else             Scrolling Up         if  header data  faded                  header data  faded   0  stop true  fadeTo 800  1                       iScrollPos   iCurScrollPos

User · Answer

Binding to both mousewheel and DOMMouseScroll ended up working really well for me     window  bind  mousewheel DOMMouseScroll   function event       if  event originalEvent wheelDelta  gt  0    event originalEvent detail  lt  0               scroll up           else              scroll down             This method is working in IE9   Chrome 33  and Firefox 27     Edit - Mar 2016  I decided to revisit this issue since it s been a while  The MDN page for the scroll event has a great way of retrieving the scroll position that makes use of requestAnimationFrame  which is highly preferable to my previous detection method  I modified their code to provide better compatibility in addition to scroll direction and position    x000D   x000D   function     x000D    var supportOffset   window pageYOffset     undefined  x000D      lastKnownPos   0  x000D      ticking   false  x000D      scrollDir  x000D      currYPos  x000D   x000D    function doSomething scrollPos  scrollDir    x000D         Your code goes here    x000D      console log  scroll pos      scrollPos       scroll dir      scrollDir   x000D      x000D   x000D    window addEventListener  wheel   function e    x000D      currYPos   supportOffset   window pageYOffset   document body scrollTop  x000D      scrollDir   lastKnownPos  gt  currYPos    up     down   x000D      lastKnownPos   currYPos  x000D   x000D      if   ticking    x000D        window requestAnimationFrame function     x000D          doSomething lastKnownPos  scrollDir   x000D          ticking   false  x000D            x000D        x000D      ticking   true  x000D        x000D        x000D   x000D   x000D    See the Pen Vanilla JS Scroll Tracking by Jesse Dupuy   blindside85  on CodePen     This code is currently working in Chrome v50  Firefox v44  Safari v9  and IE9   References    https   developer mozilla org en-US docs Web Events scroll https   developer mozilla org en-US docs Web Events wheel

User · Answer

I think you achieve with change and keyUp event  See this  Working fiddle  1     1   http   jsfiddle net vinay kaithwas18 bgd8nypa 7

User · Answer

The plugin that  DarinDimitrov posted  jquery-mousewheel  is broken with jQuery 3   It would be more advisable to use jquery-wheel which works with jQuery 3    If you don t want to go the jQuery route  MDN highly cautions using the mousewheel event as it s nonstandard and unsupported in many places  It instead says that you should use the wheel event as you get much more specificity over exactly what the values you re getting mean  It s supported by most major browsers

User · Answer

If using mentioned jquery mousewheel plugin  then what about to use the 2nd argument of event handler function - delta       my-element   on  mousewheel   function event  delta        if delta  gt  0        console log  scroll up               else       console log  scroll down

User · Answer

I got same problem recently where   window  mousewheel was returning undefined  What I did was   window  on  mousewheel   function         Further to process it I am using   function  event        var direction   null          key       if  event type      mousewheel             if  yourFunctionForGetMouseWheelDirection event   gt  0                direction    up             else               direction    down

User · Answer

use this code   knob bind  mousewheel   function e      if e originalEvent wheelDelta  lt  0        moveKnob  down        else       moveKnob  up         return false

User · Answer

There s a plugin that detects up down mouse wheel and velocity over a region

User · Answer

This is working in each IE  Firefox and Chrome s latest versions     document  ready function                whole   bind  DOMMouseScroll mousewheel   function e               if e originalEvent wheelDelta  gt  0    e originalEvent detail  lt  0                    alert  up                              else                  alert  down

User · Answer

Answers talking about  mousewheel  event are refering to a deprecated event  The standard event is simply  wheel   See https   developer mozilla org en-US docs Web Reference Events wheel

User · Answer

As of now in 2017  you can just write    window  on  wheel   function event         deltaY obviously records vertical scroll  deltaX and deltaZ exist too   if event originalEvent deltaY  lt  0          wheeled up       else          wheeled down           Works with current Firefox 51  Chrome 56  IE9

User · Answer

This worked for me       Firefox      elem   bind  DOMMouseScroll   function e        if e originalEvent detail  gt  0               scroll down          console log  Down          else              scroll up          console log  Up                   prevent page fom scrolling      return false           IE  Opera  Safari      elem   bind  mousewheel   function e        if e originalEvent wheelDelta  lt  0               scroll down          console log  Down          else              scroll up          console log  Up                   prevent page fom scrolling      return false         from stackoverflow

[javascript] Get mouse wheel events in jQuery?

Examples related to javascript

Examples related to jquery

Examples related to mousewheel