CODEWITHSUNDEEP
javascriptjqueryscroll
ditto
ditto

Reputation: 6317

Detecting if a scrollable DIV has reached the bottom

I have a <div> with overflow: scroll; applied, that I want to detect when it's being scrolled, and trigger just as it hits 5% of it's total height remaining.

JSBin - Currently I'm failing to trigger when it hits the bottom of the page.

<div style="height:50%;overflow:scroll;">
  <b style="height:5000px;display:block;"></b>
</div>


$('div').on('scroll', function(){

  if($(window).scrollTop() + $('div').height() == $('div').height()) {
    console.log("bottom of page");
  }

});

Upvotes: 1

Views: 981

Answers (1)

Tobias Weichart
Tobias Weichart

Reputation: 367

The window is not scrollable in your example, the div is. This results in the div being the element to look for when checking the scrollTop() function. Also, the summation here is greater than your b element (which you need to check for) and not equal. So changing the lines as follows the code executes as you've expected:

$('div').on('scroll', function(){
    if($("div").scrollTop() + $('div').height() > $('b').height()) {
        console.log("bottom of page");
    }
});

Upvotes: 2

Related Questions