Detecting scroll direction

Question

So I am trying to use the JavaScript on scroll to call a function  But I wanted to know if I could detect the direction of the the scroll without using jQuery  If not then are there any workarounds   I was thinking of just putting a  to top  button but would like to avoid that if I could   I have now just tried using this code but it didn t work   if document body scrollTop  lt   0       alert   scrolling down     else       alert   scrolling up

User · Answer

You can try doing this    x000D   x000D  function scrollDetect    x000D    var lastScroll   0  x000D   x000D    window onscroll   function     x000D        let currentScroll   document documentElement scrollTop    document body scrollTop     Get Current Scroll Value x000D   x000D        if  currentScroll  gt  0  amp  amp  lastScroll  lt   currentScroll   x000D          lastScroll   currentScroll  x000D          document getElementById  scrollLoc   innerHTML    Scrolling DOWN   x000D         else  x000D          lastScroll   currentScroll  x000D          document getElementById  scrollLoc   innerHTML    Scrolling UP   x000D          x000D       x000D    x000D   x000D   x000D  scrollDetect    x000D  html body  x000D    height 100   x000D    width 100   x000D    margin 0  x000D    padding 0  x000D    x000D   x000D   cont  x000D    height 100   x000D    width 100   x000D    x000D   x000D   item  x000D    margin 0  x000D    padding 0  x000D    height 100   x000D    width 100   x000D    background   ffad33  x000D    x000D   x000D   red  x000D    background  red  x000D    x000D   x000D  p  x000D    position fixed  x000D    font-size 25px  x000D    top 5   x000D    left 5   x000D    x000D   lt div class  cont  gt  x000D     lt div class  item  gt  lt  div gt  x000D     lt div class  item red  gt  lt  div gt  x000D     lt p id  scrollLoc  gt 0 lt  p gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Simple way to catch all scroll events  touch and wheel   window onscroll   function e         print  false  if direction is down and  true  if up   console log this oldScroll  gt  this scrollY     this oldScroll   this scrollY

User · Answer

Initialize an oldValue Get the newValue by listening to the event Subtract the two Conclude from the result Update oldValue with the  newValue      Initialization  let oldValue   0      Listening on the event  window addEventListener  scroll   function e           Get the new Value     newValue   window pageYOffset         Subtract the two and conclude     if oldValue - newValue  lt  0           console log  Up          else if oldValue - newValue  gt  0           console log  Down                  Update the old value     oldValue   newValue

User · Answer

This is an addition to what prateek has answered There seems to be a glitch in the code in IE so i decided to modify it a bit nothing fancy just another condition      document   ready function     var lastScrollTop   0    window  scroll function event      var st     this  scrollTop       if  st  gt  lastScrollTop          console log  down           else if st    lastScrollTop              do nothing         In IE this is an important condition because there seems to be some instances where the last scrollTop is equal to the new one         else         console log  up           lastScrollTop   st

User · Answer

This simple code would work  Check the console for results   let scroll position   0  let scroll direction   window addEventListener  scroll   function e       scroll direction    document body getBoundingClientRect    top  gt  scroll position    up     down       scroll position    document body getBoundingClientRect    top      console log scroll direction

User · Answer

It can be detected by storing the previous scrollTop value and comparing the current scrollTop value with it   JavaScript    var lastScrollTop   0      element should be replaced with the actual target element on which you have applied scroll  use window in case of no target element  element addEventListener  scroll   function       or window addEventListener  scroll         var st   window pageYOffset    document documentElement scrollTop     Credits   https   github com qeremy so blob master so dom js L426     if  st  gt  lastScrollTop            downscroll code      else            upscroll code         lastScrollTop   st  lt   0   0   st     For Mobile or negative scrolling    false

User · Answer

While the accepted answer works  it is worth noting that this will fire at a high rate  This can cause performance issues for computationally expensive operations  The recommendation from MDN is to throttle the events  Below is a modification of their sample  enhanced to detect scroll direction  Modified from  https   developer mozilla org en-US docs Web API Document scroll event       function declaration function scrollEventThrottle fn      let last known scroll position   0    let ticking   false    window addEventListener  quot scroll quot   function          let previous known scroll position   last known scroll position      last known scroll position   window scrollY      if   ticking          window requestAnimationFrame function              fn last known scroll position  previous known scroll position           ticking   false                  ticking   true                       function instantiation scrollEventThrottle  scrollPos  previousScrollPos    gt        if  previousScrollPos  gt  scrollPos          console log  quot going up quot          else         console log  quot going down quot

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 body    document getElementById  scrollableElement     scrollableElement addEventListener  wheel   checkScrollDirection    function checkScrollDirection event      if  checkScrollDirectionIsUp event         console log  UP        else       console log  Down           function checkScrollDirectionIsUp event      if  event wheelDelta        return event wheelDelta  gt  0        return event deltaY  lt  0      Example

User · Answer

I personally use this code to detect scroll direction in javascript    Just you have to define a variable to store lastscrollvalue and then use this if amp else  let lastscrollvalue   function headeronscroll             document on which scroll event will occur     var a   document querySelector   refcontainer          if  lastscrollvalue    undefined             lastscrollvalue   a scrollTop              sets lastscrollvalue       else if  a scrollTop  gt  lastscrollvalue                downscroll rules will be here         lastscrollvalue   a scrollTop         else if  a scrollTop  lt  lastscrollvalue                upscroll rules will be here         lastscrollvalue   a scrollTop

User · Answer

Simple code    Events   document  on  mousewheel DOMMouseScroll    quot element quot   function e        let delta   e originalEvent wheelDelta           if  delta  gt  0    e originalEvent detail  lt  0  upScrollFunction        if  delta  lt  0    e originalEvent detail  gt  0  donwScrollFunction

User · Answer

You can get the scrollbar position using document documentElement scrollTop  And then it is simply matter of comparing it to the previous position

[javascript] Detecting scroll direction

Examples related to javascript

Examples related to scroll

Examples related to onscroll