Check if a user has scrolled to the bottom

Question

I m making a pagination system  sort of like Facebook  where the content loads when the user scrolls to the bottom  I imagine the best way to do that is to find when the user is at the bottom of the page and run an ajax query to load more posts   The only problem is I don t know how to check if the user has scrolled to the bottom of the page with jQuery  Any ideas   I need to find a way to check when the user has scrolled to the bottom of the page with jQuery

User · Answer

Here s a fairly simple approach  const didScrollToBottom   elm scrollTop   elm clientHeight    elm scrollHeight  Example  elm onscroll   function         if elm scrollTop   elm clientHeight    elm scrollHeight               User has scrolled to the bottom of the element           Where elm is an element retrieved from i e document getElementById

User · Answer

This gives accurate results  when checking on a scrollable element  i e  not window        element  is a native JS HTMLElement if   element scrollTop     element scrollHeight - element offsetHeight           Element scrolled to bottom   offsetHeight should give the actual visible height of an element  including padding  margin  and scrollbars   and scrollHeight is the entire height of an element including invisible  overflowed  areas   jQuery s  outerHeight   should give similar result to JS s  offsetHeight -- the documentation in MDN for offsetHeight is unclear about its cross-browser support  To cover more options  this is more complete   var offsetHeight     container offsetHeight   container offsetHeight     container  outerHeight      if    container scrollTop     container scrollHeight - offsetHeight            scrolled to bottom

User · Answer

I used  ddanone answear and added Ajax call        mydiv   on  scroll   function      function infiniScroll this        function infiniScroll mydiv   console log   mydiv  scrollTop            mydiv  height             mydiv  scrollTop       mydiv  height                mydiv  0  scrollHeight      if   mydiv  scrollTop       mydiv  height        mydiv  0  scrollHeight       console log  bottom found        if    active     if there is no ajax call active   last ajax call waiting for results   do again my ajax call         myAjaxCall

User · Answer

Pure JS with cross-browser and debouncing  Pretty good performance   var CheckIfScrollBottom   debouncer function         if getDocHeight      getScrollXY   1    window innerHeight           console log  Bottom             500    document addEventListener  scroll  CheckIfScrollBottom    function debouncer a b c  var d return function   var e this f arguments g function   d null c  a apply e f   h c amp  amp  d clearTimeout d  d setTimeout g b  h amp  amp a apply e f    function getScrollXY   var a 0 b 0 return number   typeof window pageYOffset  b window pageYOffset a window pageXOffset  document body amp  amp  document body scrollLeft  document body scrollTop   b document body scrollTop a document body scrollLeft  document documentElement amp  amp  document documentElement scrollLeft  document documentElement scrollTop  amp  amp  b document documentElement scrollTop a document documentElement scrollLeft   a b   function getDocHeight   var a document return Math max a body scrollHeight a documentElement scrollHeight a body offsetHeight a documentElement offsetHeight a body clientHeight a documentElement clientHeight     Demo   http   jsbin com geherovena edit js output  PS  Debouncer  getScrollXY  getDocHeight not written by me  I just show how its work  And how I will do

User · Answer

Further to the excellent accepted answer from Nick Craver  you can throttle the scroll event so that it is not fired so frequently thus increasing browser performance   var  throttleTimer   null  var  throttleDelay   100  var  window     window   var  document     document     document ready function            window          off  scroll   ScrollHandler           on  scroll   ScrollHandler         function ScrollHandler e          throttle event      clearTimeout  throttleTimer        throttleTimer   setTimeout function              console log  scroll               do work         if   window scrollTop      window height    gt   document height   - 100                alert  near bottom                        throttleDelay

User · Answer

Instead of listening to the scroll event  using Intersection Observer is the inexpensive one for checking if the last element was visible on the viewport  that s mean user was scrolled to the bottom   It also supported for IE7 with the polyfill    x000D   x000D  var observer   new IntersectionObserver function entries   x000D     if entries 0  isIntersecting     true  x000D        console log  Scrolled to the bottom    x000D     else x000D        console log  Not on the bottom    x000D       x000D     root document querySelector   scrollContainer    x000D     threshold 1    Trigger only when whole element was visible x000D      x000D   x000D  observer observe document querySelector   scrollContainer   lastElementChild   x000D   scrollContainer  x000D    height  100px  x000D    overflow  hidden scroll  x000D    x000D   lt div id  scrollContainer  gt  x000D     lt div gt Item 1 lt  div gt  x000D     lt div gt Item 2 lt  div gt  x000D     lt div gt Item 3 lt  div gt  x000D     lt div gt Item 4 lt  div gt  x000D     lt div gt Item 5 lt  div gt  x000D     lt div gt Item 6 lt  div gt  x000D     lt div gt Item 7 lt  div gt  x000D     lt div gt Item 8 lt  div gt  x000D     lt div gt Item 9 lt  div gt  x000D     lt div gt Item 10 lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

You can try the following code       dashboard-scroll   scroll function        var ele   document getElementById  dashboard-scroll        if ele scrollHeight - ele scrollTop     ele clientHeight          console log  at the bottom of the scroll

User · Answer

i used this test to detect the scroll reached the bottom  event target scrollTop     event target scrollHeight - event target offsetHeight

User · Answer

My solution in plain js    x000D   x000D  let el document getElementById  el    x000D  el addEventListener  scroll   function e    x000D      if  this scrollHeight - this scrollTop - this clientHeight lt  0    x000D          alert  Bottom    x000D        x000D      x000D   el  x000D    width 400px  x000D    height 100px  x000D    overflow-y scroll  x000D    x000D   lt div id  el  gt  x000D   lt div gt content lt  div gt  x000D   lt div gt content lt  div gt  x000D   lt div gt content lt  div gt  x000D   lt div gt content lt  div gt  x000D   lt div gt content lt  div gt  x000D   lt div gt content lt  div gt  x000D   lt div gt content lt  div gt  x000D   lt div gt content lt  div gt  x000D   lt div gt content lt  div gt  x000D   lt div gt content lt  div gt  x000D   lt div gt content lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

To stop repeated alert of Nick s answer  ScrollActivate     function ScrollActivate           window  on  scroll   function              if    window  scrollTop       window  height    gt    document  height   - 100                  window  off  scroll                alert  near bottom

User · Answer

For those using Nick s solution and getting repeated alerts   events firing  you could add a line of code above the alert example     window  scroll function        if   window  scrollTop       window  height    gt    document  height   - 100             window  unbind  scroll           alert  near bottom                This means that the code will only fire the first time you re within 100px of the bottom of the document  It won t repeat if you scroll back up and then back down  which may or may not be useful depending on what you re using Nick s code for

User · Answer

All these solutions doesn t work for me on Firefox and Chrome  so I use custom functions from Miles O Keefe and meder omuraliev like this   function getDocHeight         var D   document      return Math max          D body scrollHeight  D documentElement scrollHeight          D body offsetHeight  D documentElement offsetHeight          D body clientHeight  D documentElement clientHeight           function getWindowSize       var myWidth   0  myHeight   0    if  typeof  window innerWidth       number            Non-IE     myWidth   window innerWidth      myHeight   window innerHeight      else if  document documentElement  amp  amp    document documentElement clientWidth    document documentElement clientHeight             IE 6  in  standards compliant mode      myWidth   document documentElement clientWidth      myHeight   document documentElement clientHeight      else if  document body  amp  amp    document body clientWidth    document body clientHeight             IE 4 compatible     myWidth   document body clientWidth      myHeight   document body clientHeight        return  myWidth  myHeight        window  scroll function         if   window  scrollTop     getWindowSize   1     getDocHeight                  alert  bottom

User · Answer

Here s my two cents as the accepted answer didn t work for me   var documentAtBottom    document documentElement scrollTop   window innerHeight   gt   document documentElement scrollHeight

User · Answer

Google Chrome gives the full height of the page if you call   window  height    Instead  use window innerHeight to retrieve the height of your window   Necessary check should be   if   window  scrollTop     window innerHeight  gt    document  height   - 50        console log  reached bottom

User · Answer

Please check this answer   window onscroll   function ev        if   window innerHeight   window scrollY   gt   document body offsetHeight           console log  bottom               You can do footerHeight - document body offsetHeight to see if you are near the footer or reached the footer

User · Answer

Nick answers its fine but you will have functions which repeats itsself while scrolling or will not work at all if user has the window zoomed  I came up with an easy fix just math round the first height and it works just as assumed       if  Math round   window  scrollTop        window  innerHeight        document  height         loadPagination            go-up   css  display   block   show  slow

User · Answer

Apparently what worked for me was  body  and not  window  like this      body   scroll function        if    body   scrollTop        body   height        document  height             alert at buttom           for cross-browser compatibility use     function getheight        var doc   document      return  Math max          doc body scrollHeight  doc documentElement scrollHeight          doc body offsetHeight  doc documentElement offsetHeight          doc body clientHeight  doc documentElement clientHeight                    and then instead of   document  height   call the function getheight       body   scroll function          if    body   scrollTop        body   height      getheight               alert at bottom          for near bottom use      body   scroll function       if    body   scrollTop        body   height    gt  getheight   -100           alert near bottom

User · Answer

Here is a piece of code that will help you debug your code  I tested the above answers and found them to be buggy   I have test the followings on Chrome  IE  Firefox  IPad Safari   I don t have any others installed to test      lt script type  text javascript  gt       function             window  scroll function               var docElement     document  0  documentElement           var winElement     window  0             if   docElement scrollHeight - winElement innerHeight     winElement pageYOffset                alert  bottom                                 lt  script gt    There may be a simpler solution  but I stopped at the point at which IT WORKED  If you are still having problems with some rogue browser  here is some code to help you debug    lt script type  text javascript  gt       function             window  scroll function               var docElement     document  0  documentElement           var details                details      lt b gt Document lt  b gt  lt br   gt             details     clientHeight     docElement clientHeight     lt br   gt             details     clientTop     docElement clientTop     lt br   gt             details     offsetHeight     docElement offsetHeight     lt br   gt             details     offsetParent      docElement offsetParent    null      lt br   gt             details     scrollHeight     docElement scrollHeight     lt br   gt             details     scrollTop     docElement scrollTop     lt br   gt              var winElement     window  0            details      lt b gt Window lt  b gt  lt br   gt             details     innerHeight     winElement innerHeight     lt br   gt             details     outerHeight     winElement outerHeight     lt br   gt             details     pageYOffset     winElement pageYOffset     lt br   gt             details     screenTop     winElement screenTop     lt br   gt             details     screenY     winElement screenY     lt br   gt             details     scrollY     winElement scrollY     lt br   gt              details      lt b gt End of page lt  b gt  lt br   gt             details     Test      docElement scrollHeight - winElement innerHeight          winElement pageYOffset     lt br   gt             details     End of Page              if   docElement scrollHeight - winElement innerHeight     winElement pageYOffset                 details     YES              else                details     NO                            test   html details                     lt  script gt   lt div id  test  style  position  fixed  left 0  top  0  z-index  9999  background-color   FFFFFF   gt    I hope this will save someone some time

User · Answer

var elemScrolPosition   elem scrollHeight - elem scrollTop - elem clientHeight    It calculates distance scroll bar to bottom of element  Equal 0  if scroll bar has reached bottom

User · Answer

I m not exactly sure why this has not been posted yet  but as per the documentation from MDN  the simplest way is by using native javascript properties   element scrollHeight - element scrollTop     element clientHeight   Returns true when you re at the bottom of any scrollable element  So simply using javascript   element addEventListener  scroll   function event        var element   event target      if  element scrollHeight - element scrollTop     element clientHeight                console log  scrolled                scrollHeight have wide support in browsers  from ie 8 to be more precise  while clientHeight and scrollTop are both supported by everyone  Even ie 6  This should be cross browser safe

User · Answer

Use the  scroll   event on window  like this     window  scroll function        if   window  scrollTop       window  height        document  height             alert  bottom                You can test it here  this takes the top scroll of the window  so how much it s scrolled down  adds the height of the visible window and checks if that equals the height of the overall content  document    If you wanted to instead check if the user is near the bottom  it d look something like this     window  scroll function        if   window  scrollTop       window  height    gt    document  height   - 100           alert  near bottom                You can test that version here  just adjust that 100 to whatever pixel from the bottom you want to trigger on

User · Answer

Nick Craver s answer works fine  spare the issue that the value of   document  height   varies by browser   To make it work on all browsers  use this function from James Padolsey   function getDocHeight         var D   document      return Math max          D body scrollHeight  D documentElement scrollHeight          D body offsetHeight  D documentElement offsetHeight          D body clientHeight  D documentElement clientHeight            in place of   document  height    so that the final code is     window  scroll function            if   window  scrollTop       window  height      getDocHeight                 alert  bottom

User · Answer

Try this for match condition if scroll to bottom end  if    this  0  scrollHeight -   this  scrollTop             this  outerHeight             code for your custom logic

User · Answer

Many other solutions doesn t work for me Because on scroll to bottom my div was triggering the alert 2 times and when moving up it was also trigerring upto a few pixels so The solution is              your-div   on  resize scroll   function                         if    this  scrollTop                       this  innerHeight    gt                     this  0  scrollHeight   10                     alert  reached bottom

User · Answer

Let me show approch without JQuery  Simple JS function    function isVisible elem      var coords   elem getBoundingClientRect      var topVisible   coords top  gt  0  amp  amp  coords top  lt  0    var bottomVisible   coords bottom  lt  shift  amp  amp  coords bottom  gt  0    return topVisible    bottomVisible      Short example how to use it   var img   document getElementById  pic1        if  isVisible img     img style opacity    1 00

User · Answer

This is my two cents       container element   scroll  function            console log   this  scrollTop            this  height             this  scrollTop       this  height                this  0  scrollHeight             if   this  scrollTop       this  height        this  0  scrollHeight               console log  bottom found

User · Answer

Nick Craver s answer needs to be slightly modified to work on iOS 6 Safari Mobile and should be     window  scroll function        if   window  scrollTop     window innerHeight      document  height             alert  bottom                Changing   window  height   to window innerHeight should be done because when the address bar is hidden an additional 60px are added to the window s height but using   window  height   does not reflect this change  while using window innerHeight does   Note  The window innerHeight property also includes the horizontal scrollbar s height  if it is rendered   unlike   window  height   which will not include the horizontal scrollbar s height  This is not a problem in Mobile Safari  but could cause unexpected behavior in other browsers or future versions of Mobile Safari  Changing    to  gt   could fix this for most common use cases   Read more about the window innerHeight property here

[javascript] Check if a user has scrolled to the bottom

Examples related to javascript

Examples related to jquery

Examples related to scroll

[javascript] Check if a user has scrolled to the bottom

Examples related to javascript

Examples related to jquery

Examples related to scroll

Examples related to pagination