检测可滚动DIV是否已到达底部

Question

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");
  }

});

Answer 1

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");
    }
});