Detecting when user scrolls to bottom of div with jQuery

Question

I have a div box  called flux  with a variable amount of content inside  This divbox has overflow set to auto   Now  what I am trying to do  is  when the use scroll to the bottom of this DIV-box  load more content into the page  I know how to do this  load the content  but I don t know how to detect when the user has scrolled to the bottom of the div tag  If I wanted to do it for the entire page  I d take  scrollTop and subtract that from  height   But I can t seem to do that here   I ve tried taking  scrollTop from flux  and then wrapping all the content inside a div called inner  but if I take the innerHeight of flux it returns 564px  the div is set to 500 as height  and the height of  innner  it returns 1064  and the scrolltop  when at the bottom of the div says 564   What can I do

User · Answer

window  on  scroll   function           get height of the  browser  window aka viewport     var scrollHeight     document  height           get height of the document      var scrollPosition     window  height       window  scrollTop        if   scrollHeight - scrollPosition    scrollHeight     0               code to run when scroll to bottom of the page             This is the code on github

User · Answer

I have crafted this piece of code that worked for me to detect when I scroll to the end of an element  let element       element     if    document  scrollTop    gt  element offset   top   element height                do something

User · Answer

If you need to use this on a div that has overflow-y as hidden or scroll  something like this may be what you need   if      element   prop  scrollHeight   -     element   scrollTop    lt   Math ceil     element   height           at bottom   true      I found ceil was needed because prop scrollHeight seems to round  or perhaps some other reason causing this to be off by less than 1

User · Answer

I found a solution that when you scroll your window and end of a div shown from bottom gives you an alert     window  bind  scroll   function         if   window  scrollTop    gt       posts   offset   top       posts   outerHeight   - window innerHeight            alert  end reached                In this example if you scroll down when div   posts  finish its give you an alert

User · Answer

Though this was asked almost 6 years  ago still hot topic in UX design  here is demo snippet if any newbie wanted to use   x000D   x000D    function     x000D   x000D       this is only for demonstration purpose    x000D    var t       posts   html    x000D      c   1  x000D      scroll enabled   true  x000D   x000D    function load ajax     x000D   x000D         call ajax here    on success enable scroll     x000D          posts   append   lt h4 gt        c       lt  h4 gt     t   x000D   x000D        again enable loading on scroll       x000D      scroll enabled   true  x000D   x000D      x000D   x000D   x000D      window  bind  scroll   function     x000D      if  scroll enabled    x000D   x000D           if 90  scrolled    x000D      if   window  scrollTop    gt        posts   offset   top       posts   outerHeight  -window innerHeight  0 9    x000D   x000D             load ajax content    x000D          scroll enabled   false    x000D          load ajax    x000D          x000D   x000D        x000D   x000D        x000D   x000D      x000D  h4   x000D    color  red  x000D    font-size  36px  x000D    background-color  yellow  x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 1 12 4 jquery min js  gt  lt  script gt  x000D   lt div class  posts  gt  x000D    Lorem ipsum dolor sit amet  Consectetuer augue nibh lacus at  lt br gt  Pretium Donec felis dolor penatibus  lt br gt  Phasellus consequat Vivamus dui lacinia  lt br gt  Ornare nonummy laoreet lacus Donec  lt br gt  Ut ut libero Curabitur id  lt br gt  Dui pretium hendrerit x000D    sapien Pellentesque  lt br gt  Lorem ipsum dolor sit amet  lt br gt  Consectetuer augue nibh lacus at  lt br gt  Pretium Donec felis dolor penatibus  lt br gt  Phasellus consequat Vivamus dui lacinia  lt br gt  Ornare nonummy laoreet lacus Donec  lt br gt  Ut ut libero Curabitur id  lt br gt   Dui pretium hendrerit sapien Pellentesque  lt br gt  Lorem ipsum dolor sit amet  lt br gt  Consectetuer augue nibh lacus at  lt br gt  Pretium Donec felis dolor penatibus  lt br gt  Phasellus consequat Vivamus dui lacinia  lt br gt  Ornare nonummy laoreet lacus Donec  lt br gt  Ut ut x000D    libero Curabitur id  lt br gt  Dui pretium hendrerit sapien Pellentesque  lt br gt  Lorem ipsum dolor sit amet  lt br gt  Consectetuer augue nibh lacus at  lt br gt  Pretium Donec felis dolor penatibus  lt br gt  Phasellus consequat Vivamus dui lacinia  lt br gt  Ornare nonummy laoreet x000D    lacus Donec  lt br gt  Ut ut libero Curabitur id  lt br gt  Dui pretium hendrerit sapien Pellentesque x000D   lt  div gt  x000D   x000D   x000D

User · Answer

There are some properties methods you can use       scrollTop    how much has been scrolled     innerHeight     inner height of the element DOMElement scrollHeight  height of the content of the element   So you can take the sum of the first two properties  and when it equals to the last property  you ve reached the end   jQuery function              flux   on  scroll   function             if   this  scrollTop       this  innerHeight    gt     this  0  scrollHeight                alert  end reached                           http   jsfiddle net doktormolle w7X9N   Edit  I ve updated  bind  to  on  as per      As of jQuery 1 7  the  on   method is the preferred method for attaching event handlers to a document

User · Answer

Just an additional note here as I found this when looking for a solution for a fixed div that I want to scroll  For my scenario I found that its preferable to take into account the padding on the div so I can hit the end exactly  So expanding on  Dr Molle s answer I add the following      flux   bind  scroll   function         var scrollPosition     this  scrollTop       this  outerHeight        var divTotalHeight     this  0  scrollHeight                              parseInt   this  css  padding-top    10                               parseInt   this  css  padding-bottom    10                              parseInt   this  css  border-top-width    10                              parseInt   this  css  border-bottom-width    10        if  scrollPosition    divTotalHeight               alert  end reached                  That ll give you the precise location  including padding and borders

User · Answer

Here s another version   The key code is function scroller   which takes input as the height of the div containing the scrolling section  using overflow scroll  It approximates 5px from the top or 10px from the bottom as at the top or bottom  Otherwise it s too sensitive  It seems 10px is about the minimum  You ll see it adds 10 to the div height to get the bottom height  I assume 5px might work  I didn t test extensively  YMMV  scrollHeight returns the height of the inner scrolling area  not the displayed height of the div  which in this case is 400px    lt  php   scrolling area height 400  echo    lt script type  text javascript  gt            function scroller ourheight                var ourtop document getElementById   scrolling area    scrollTop              if  ourtop  gt   ourheight-      scrolling area height 10                          alert   at the bottom  ourtop    ourtop    ourheight    ourheight                             if  ourtop  lt    5                     alert   Reached the top                                lt  script gt    lt style type  text css  gt   scroller                display block              float left              top 10px              left 10px              height    scrolling area height                border 1px solid red              width 200px              overflow scroll              lt  style gt    content  your content here     lt div id  scrolling area  class  scroller  gt  onscroll  var ourheight document getElementById   scrolling area    scrollHeight          scroller ourheight             gt    content    lt  div gt       gt

User · Answer

this worked for me though    window  scroll function       if    window  scrollTop    gt       document  height   -   window  height    -     divID   innerHeight           console log  div reached

User · Answer

Guys this is the solution to the zoom issue  it works with all zoom levels  in case you need it   if   Math abs elem offset   top    elem height     elem offset   top  gt   elem outerHeight                           console log  bottom                           We re at the bottom

User · Answer

If anyone gets scrollHeight as undefined  then select elements  1st subelement  mob top menu 0  scrollHeight

User · Answer

not sure if it is any help but this is how I do it   I have an index panel that is larger that the window and I let it scroll until the end  this index is reached  Then I fix it in position  The process is reversed once you scroll toward the top of the page   Regards    lt style type  text css  gt       fixed Bot                   position  fixed                   bottom  24px                      lt  style gt    lt script type  text javascript  gt        document  ready function              var sidebarheight       index   height            var windowheight     window  height                window  scroll function                  var scrollTop     window  scrollTop                 if  scrollTop  gt   sidebarheight - windowheight                       index   addClass  fixed Bot                              else                       index   removeClass  fixed Bot                                                           lt  script gt

User · Answer

Though the question was asked 5 5 years ago  still it is more than relevant in today s UI UX context  And I would like to add my two cents   var element   document getElementById  flux    if  element scrollHeight - element scrollTop     element clientHeight                   element is at the end of its scroll  load more content         Source  https   developer mozilla org en-US docs Web API Element scrollHeight Determine if an element has been totally scrolled  Some elements won t allow you to scroll the full height of the element  In those cases you can use   var element   docuement getElementById  flux    if  element offsetHeight   element scrollTop     element scrollHeight         element is at the end of its scroll  load more content

User · Answer

If you are not using Math round   function the solution suggested by Dr Molle will not work in some cases when a browser window has a zoom   For example    this  scrollTop       this  innerHeight     600     this  0  scrollHeight yields   599 99998   600    599 99998 fails   Here is the correct code   jQuery function              flux   on  scroll   function             if Math round   this  scrollTop       this  innerHeight    10   gt   Math round   this  0  scrollHeight  10                 alert  end reached                           You may also add some extra margin pixels if you do not need a strict condition  var margin   4  jQuery function              flux   on  scroll   function             if Math round   this  scrollTop       this  innerHeight    10   gt   Math round   this  0  scrollHeight  10  - margin                alert  end reached

User · Answer

In simple DOM usage you can check the condition  element scrollTop   element clientHeight    element scrollHeight   if true then you have reached the end

[javascript] Detecting when user scrolls to bottom of div with jQuery

Examples related to javascript

Examples related to jquery