How can I determine the direction of a jQuery scroll event

Question

I m looking for something to this effect     window  scroll function event      if     magic code                upscroll code      else            downscroll code            Any ideas

User · Answer

To ignore any snap   momentum   bounce back at the top and bottom of the page  here is a modified version of Josiah s accepted answer   var prevScrollTop   0    window  scroll function event        var scrollTop     this  scrollTop         if   scrollTop  lt  0             scrollTop   0            if   scrollTop  gt     body   height   -   window  height               scrollTop      body   height   -   window  height               if  scrollTop  gt   prevScrollTop  amp  amp  scrollTop               scrolling down       else              scrolling up            prevScrollTop   scrollTop

User · Answer

Keep it super simple   jQuery Event Listener Way     window  on  wheel   function      whichDirection event         Vanilla JavaScript Event Listener Way   if window addEventListener     addEventListener  wheel   whichDirection  false     else if  window attachEvent      attachEvent  wheel   whichDirection  false       Function Remains The Same   function whichDirection event     console log event     WheelEvent has all kinds of good stuff to work with      var scrollDirection   event deltaY    if scrollDirection     1       console log  meet me at the club  going down   scrollDirection       else if scrollDirection     -1        console log  Going up  on a tuesday   scrollDirection           I wrote a more indepth post on it here

User · Answer

I had problems with elastic scrolling  scroll bouncing  rubber-banding   Ignoring the down-scroll event if close to the page top worked for me   var position     window  scrollTop      window  scroll function          var scroll     window  scrollTop        var downScroll   scroll  gt  position      var closeToTop   -120  lt  scroll  amp  amp  scroll  lt  120      if  downScroll  amp  amp   closeToTop               scrolled down and not to close to top  to avoid Ipad elastic scroll-problems              top-container   slideUp  fast                main-header   addClass  padding-top          else              scrolled up             top-container   slideDown  fast                main-header   removeClass  padding-top              position   scroll

User · Answer

You Should try this   var scrl   window  scroll function            if   window  scrollTop    lt  scrl                 some code while previous scroll          else              if   window  scrollTop    gt  200                     scroll while downward              else   scroll while downward after some specific height                                 scrl     window  scrollTop

User · Answer

You can do it without having to keep track of the previous scroll top  as all the other examples require     window  bind  mousewheel   function event        if  event originalEvent wheelDelta  gt   0            console log  Scroll up              else           console log  Scroll down                I am not an expert on this so feel free to research it further  but it appears that when you use   element  scroll  the event being listened for is a  scroll  event    But if you specifically listen for a mousewheel event by using bind  the originalEvent attribute of the event parameter to your callback contains different information   Part of that information is wheelDelta   If it s positive  you moved the mousewheel up   If it s negative  you moved the mousewheel down    My guess is that mousewheel events will fire when the mouse wheel turns  even if the page does not scroll  a case in which  scroll  events probably are not fired   If you want  you can call event preventDefault   at the bottom of your callback to prevent the page from scrolling  and so that you can use the mousewheel event for something other than a page scroll  like some type of zoom functionality

User · Answer

I have seen many version of good answers here but it seems some folks are having cross browser issues so this is my fix   I have used this successfully to detect direction in FF  IE and Chrome     I haven t tested it in safari  as I use windows typically      html  body   bind   mousewheel DOMMouseScroll onmousewheel touchmove scroll        function e            if  e target id     el   return          e preventDefault            e stopPropagation               Determine Direction         if  e originalEvent wheelDelta  amp  amp  e originalEvent wheelDelta  gt   0                  Up             alert  up               else if  e originalEvent detail  amp  amp  e originalEvent detail  lt   0                  Up             alert  up               else                 Down             alert  down                          Keep in mind I also use this to stop any scrolling so if you want scrolling to still occur you must remove the e preventDefault    e stopPropagation

User · Answer

Use this to find the scroll direction  This is only to find the direction of the Vertical Scroll  Supports all cross browsers       var scrollableElement   document getElementById  scrollableElement         scrollableElement addEventListener  wheel   findScrollDirectionOtherBrowsers        function findScrollDirectionOtherBrowsers event           var delta           if  event wheelDelta               delta   event wheelDelta           else              delta   -1   event deltaY                     if  delta  lt  0               console log  DOWN             else if  delta  gt  0               console log  UP                       Example

User · Answer

Since bind has been deprecated on v3   superseded by on   and wheel is now supported  forget wheelDelta    x000D   x000D    window  on  wheel   function e    x000D    if  e originalEvent deltaY  gt  0    x000D      console log  down    x000D      else   x000D      console log  up    x000D      x000D    if  e originalEvent deltaX  gt  0    x000D      console log  right    x000D      else   x000D      console log  left    x000D      x000D      x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt h1 style  white-space nowrap overflow scroll  gt  x000D   lt br  gt  x000D   lt br  gt  x000D   lt br  gt  x000D   lt br  gt  x000D   lt br  gt  x000D   lt br  gt  x000D   lt  h1 gt  x000D   x000D   x000D    wheel event s Browser Compatibility on MDN s  2019-03-18

User · Answer

Existing Solution There could be 3 solution from this posting and other answer  Solution 1     var lastScrollTop   0        window  on  scroll   function             st     this  scrollTop            if st  lt  lastScrollTop                console log  up 1                      else               console log  down 1                      lastScrollTop   st           Solution 2        body   on  DOMMouseScroll   function e           if e originalEvent detail  lt  0                console log  up 2                      else               console log  down 2                       Solution 3        body   on  mousewheel   function e           if e originalEvent wheelDelta  gt  0                console log  up 3                      else               console log  down 3                        Multi Browser Test I couldn t tested it on Safari chrome 42  Win 7   Solution 1  Up   1 event per 1 scroll Down   1 event per 1 scroll   Solution 2  Up   Not working Down   Not working   Solution 3  Up   1 event per 1 scroll Down   1 event per 1 scroll    Firefox 37  Win 7   Solution 1  Up   20 events per 1 scroll Down   20 events per 1 scroll   Solution 2  Up   Not working Down   1 event per 1 scroll   Solution 3  Up   Not working Down   Not working    IE 11  Win 8   Solution 1  Up   10 events per 1 scroll  side effect   down scroll occured at last  Down   10 events per 1 scroll   Solution 2  Up   Not working Down   Not working   Solution 3  Up   Not working Down   1 event per 1 scroll    IE 10  Win 7   Solution 1  Up   1 event per 1 scroll Down   1 event per 1 scroll   Solution 2  Up   Not working Down   Not working   Solution 3  Up   1 event per 1 scroll Down   1 event per 1 scroll    IE 9  Win 7   Solution 1  Up   1 event per 1 scroll Down   1 event per 1 scroll   Solution 2  Up   Not working Down   Not working   Solution 3  Up   1 event per 1 scroll Down   1 event per 1 scroll    IE 8  Win 7   Solution 1  Up   2 events per 1 scroll  side effect   down scroll occured at last  Down   2 4 events per 1 scroll   Solution 2  Up   Not working Down   Not working   Solution 3  Up   1 event per 1 scroll Down   1 event per 1 scroll     Combined Solution  I checked that side effect from IE 11 and IE 8 is come from if else statement  So  I replaced it with if else if statement as following   From the multi browser test  I decided to use Solution 3 for common browsers and Solution 1 for firefox and IE 11  I referred this answer to detect IE 11         Detect IE version     var iev 0      var ieold     MSIE   d    d     test navigator userAgent        var trident     navigator userAgent match  Trident  7 0        var rv navigator userAgent indexOf  quot rv 11 0 quot         if  ieold  iev new Number RegExp  1       if  navigator appVersion indexOf  quot MSIE 10 quot      -1  iev 10      if  trident amp  amp rv  -1  iev 11          Firefox or IE 11     if typeof InstallTrigger      undefined     iev    11            var lastScrollTop   0            window  on  scroll   function                 st     this  scrollTop                if st  lt  lastScrollTop                    console log  Up                              else if st  gt  lastScrollTop                    console log  Down                              lastScrollTop   st                           Other browsers     else              body   on  mousewheel   function e               if e originalEvent wheelDelta  gt  0                    console log  Up                              else if e originalEvent wheelDelta  lt  0                    console log  Down

User · Answer

Why nobody use the event object returned by jQuery on scroll     window on  scroll   function  event        console group  Scroll        console info  Scroll event    event       console info  Position    this pageYOffset       console info  Direction    event originalEvent dir      Here is the direction     console groupEnd          I m using chromium and I didn t checked on other browsers if they have the dir property

User · Answer

this code work fine with IE  Firefox  Opera and Chrome     window  bind  wheel mousewheel   function event          if  event originalEvent deltaY  gt   0              console log  Scroll down                  else             console log  Scroll up                     wheel mousewheel  and the property deltaY must be use in bind   function   Remember   You re user must update their system and browsers for security reasons  In 2018  the excuses of  I have IE 7  is a nonsense  We must educate users   Have a good day

User · Answer

This is simple and easy detection for when the user scrolls away from the top of the page and for when they return to the top     window  scroll function         if   window  scrollTop    gt  0               User has scrolled       else              User at top of page

User · Answer

This works in all pc or phones browsers  expanding on the top answers  One can build a more complex event object window  scroll evt   then call it in the handleScroll   function  This one triggers for 2 concurrent conditions  if certain delay has elapsed or certain delta is passed to eliminate some unwanted triggers    window  scroll evt     delta  0  delay  0  direction  0  time  Date now    pos    window  scrollTop    min delta  120  min delay  10     window  scroll function          var currentScroll     this  scrollTop        var currentTime   Date now        var boolRun  window  scroll evt    min delay   gt 0   Math abs currentTime - window  scroll evt    time    gt window  scroll evt    min delay    false      boolRun   boolRun  amp  amp    window  scroll evt    min delta   gt 0   Math abs currentScroll - window  scroll evt    pos    gt window  scroll evt    min delta    false       if boolRun           window  scroll evt    delta     currentScroll - window  scroll evt    pos            window  scroll evt    direction     window  scroll evt    delta   gt 0  down   up           window  scroll evt    delay    currentTime - window  scroll evt    time     in milisecs            window  scroll evt    pos     currentScroll          window  scroll evt    time     currentTime          handleScroll                function handleScroll        event stopPropagation          alert window  scroll evt    direction         console log window  scroll evt

User · Answer

Check current scrollTop vs previous scrollTop   var lastScrollTop   0    window  scroll function event      var st     this  scrollTop       if  st  gt  lastScrollTop             downscroll code      else            upscroll code         lastScrollTop   st

User · Answer

You can determin mousewhell direction     window  on  mousewheel DOMMouseScroll   function  e        var delta   e originalEvent wheelDelta                       e originalEvent wheelDelta   -e originalEvent detail       if  delta  gt   0            console log  scroll up          else           console log  scroll down

User · Answer

in the  data   of the element you can store a JSON and test values to launch events    top   1     first top event  function             second top event  function             third top event  function             scroll down event1  function             scroll down event2  function

User · Answer

This is an optimal solution for detecting the direction just when the user end scrolling   var currentScrollTop   0      window  bind  scroll   function                scrollTop     this  scrollTop         clearTimeout   data this   scrollTimer           data this   scrollTimer   setTimeout function              if scrollTop  gt  currentScrollTop                  downscroll code                 mfb-component--bl   addClass  mfbHide             else                 upscroll code                 mfb-component--bl   removeClass  mfbHide                      currentScrollTop   scrollTop          250

User · Answer

stock an increment in the  data    of element scrolled  you will then be able to test number of times the scroll reached top

User · Answer

You can use both scroll and mousewheel option to track up and down movement at once       body   bind  scroll mousewheel   function event     if  event originalEvent wheelDelta  gt   0          console log  moving down                 else         console log  moving up                 You can replace  body  with  window  as well

User · Answer

You can use this as well  x000D   x000D    document  ready function    x000D   x000D    var currentscroll position     window  scrollTop    x000D    window  on  scroll   function    x000D  Get page scroll direction    x000D      x000D   x000D  function Get page scroll direction    x000D    var running scroll position     window  scrollTop    x000D    if running scroll position  gt  currentscroll position    x000D         x000D            direction value   text  Scrolling Down Scripts    x000D   x000D      else   x000D          x000D             direction value   text  Scrolling Up Scripts    x000D   x000D      x000D    currentscroll position   running scroll position  x000D    x000D   x000D      x000D   direction value  x000D    position  fixed  x000D    height  30px  x000D    background-color   333  x000D    color   fff  x000D    text-align  center  x000D    z-index  99  x000D    left  0  x000D    top  0  x000D    width  100   x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   x000D   lt div class  direction value  gt  x000D   lt  div gt  x000D   lt p gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque  enim recusandae quos  magnam  perferendis accusamus cumque nemo modi unde  lt  p gt  x000D   lt p gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque  enim recusandae quos  magnam  perferendis accusamus cumque nemo modi unde  lt  p gt  x000D   lt p gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque  enim recusandae quos  magnam  perferendis accusamus cumque nemo modi unde  lt  p gt  x000D   lt p gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque  enim recusandae quos  magnam  perferendis accusamus cumque nemo modi unde  lt  p gt  x000D   lt p gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque  enim recusandae quos  magnam  perferendis accusamus cumque nemo modi unde  lt  p gt  x000D   lt p gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque  enim recusandae quos  magnam  perferendis accusamus cumque nemo modi unde  lt  p gt  x000D   x000D   x000D

User · Answer

Scroll Event  The scroll event behaves oddly in FF  it is fired a lot of times because of the smoothness scrolling  but it works   Note  The scroll event actually is fired when dragging the scroll bar  using cursor keys or mousewheel      creates an element to print the scroll position     lt p id  test  gt    appendTo  body   css       padding   5px 7px       background    e9e9e9       position   fixed       bottom   15px       left   35px         binds the  scroll  event   window  scroll function  e        var target   e currentTarget          self     target           scrollTop   window pageYOffset    target scrollTop          lastScrollTop   self data  lastScrollTop      0          scrollHeight   target scrollHeight    document body scrollHeight          scrollText            if  scrollTop  gt  lastScrollTop            scrollText     lt b gt scroll down lt  b gt          else           scrollText     lt b gt scroll up lt  b gt                   test   html scrollText           lt br gt innerHeight      self innerHeight             lt br gt scrollHeight      scrollHeight           lt br gt scrollTop      scrollTop           lt br gt lastScrollTop      lastScrollTop        if  scrollHeight - scrollTop     self innerHeight            console log    End of scroll                 saves the current scrollTop     self data  lastScrollTop   scrollTop           Wheel Event  You also may take a look at MDN  it exposes a great information about the Wheel Event   Note  The wheel event is fired only when using the mousewheel  cursor keys and dragging the scroll bar does not fire the event   I read the document and the example  Listening to this event across browser and after some tests with FF  IE  chrome  safari  I ended up with this snippet      creates an element to print the scroll position     lt p id  test  gt    appendTo  body   css       padding   5px 7px       background    e9e9e9       position   fixed       bottom   15px       left   15px         attach the  wheel  event if it is supported  otherwise  mousewheel  event is used    html   on   onwheel  in document createElement  div      wheel     mousewheel    function  e        var evt   e originalEvent    e         this is what really matters     var deltaY   evt deltaY     -1   40   evt wheelDelta     wheel    mousewheel         scrollTop     this  scrollTop         body   scrollTop      fix safari         scrollText            if  deltaY  gt  0            scrollText     lt b gt scroll down lt  b gt          else           scrollText     lt b gt scroll up lt  b gt                 console log  Event     evt           test   html scrollText           lt br gt clientHeight      this clientHeight           lt br gt scrollHeight      this scrollHeight           lt br gt scrollTop      scrollTop           lt br gt deltaY      deltaY

User · Answer

Store the previous scroll location  then see if the new one is greater than or less than that   Here s a way to avoid any global variables  fiddle available here     function          var previousScroll   0         window  scroll function           var currentScroll     this  scrollTop           if  currentScroll  gt  previousScroll              alert  down             else             alert  up                    previousScroll   currentScroll                  run this anonymous function immediately

User · Answer

var tempScrollTop  currentScrollTop   0      window  scroll function         currentScrollTop       div   scrollTop         if  tempScrollTop  gt  currentScrollTop               upscroll code        else if  tempScrollTop  lt  currentScrollTop             downscroll code        tempScrollTop   currentScrollTop        or use the mousewheel extension  see here

User · Answer

I understand there has already been an accepted answer  but wanted to post what I am using in case it can help anyone  I get the direction like cliphex with the mousewheel event but with support for Firefox  It s useful doing it this way in case you are doing something like locking scroll and can t get the current scroll top   See a live version here     window  on  mousewheel DOMMouseScroll   function  e         var direction    function               var delta    e type      DOMMouseScroll                         e originalEvent detail   -40                        e originalEvent wheelDelta            return delta  gt  0   0   1                 if direction     1              scroll down           if direction     0              scroll up

User · Answer

In case you just want to know if you scroll up or down using a pointer device  mouse or track pad  you can use the deltaY property of the wheel event    x000D   x000D      container   on  wheel   function event    x000D    if  event originalEvent deltaY  gt  0    x000D          result   append  Scrolled down  lt br gt     x000D      else   x000D          result   append  Scrolled up  lt br gt     x000D      x000D      x000D   container   x000D    height  200px  x000D    width  400px  x000D    margin  20px  x000D    border  1px solid black  x000D    overflow-y  auto  x000D    x000D   content   x000D    height  300px  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   lt div class  container  gt  x000D     lt div class  content  gt  x000D      Scroll me  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   lt div class  result  gt  x000D     lt p gt Action  lt  p gt  x000D   lt  div gt  x000D   x000D   x000D

[javascript] How can I determine the direction of a jQuery scroll event?

Examples related to javascript

Examples related to jquery