jQuery: detecting reaching bottom of scroll doesn't work, only detects the top! :(

Question

Hi folks!

So basically my problem is a seemingly simple one.

You can see it in action at http://furnace.howcode.com (please note that data is returned via Ajax, so if nothing happens give it a few moments!).

What's MEANT to happen, is in the second column when you reach the bottom of scrolling, the next 5 results are returned.

But what actually happens is it only returns the 5 results when you hit the TOP of the scroll area. Try it: scroll down, nothing happens. Scroll back up to the top, the results are returned.

What's going wrong?

Here's my code I'm using:

$('#col2').scroll(function(){
    if ($('#col2').scrollTop() == $('#col2').height() - $('#col2').height()){
       loadMore();
    }
});

loadMore(); is the function that gets the data and appends it.

So what's going wrong here?

Thanks for your help!

Jack

Answer 1

Your math is wrong, your saying if the scrollbar position is equal to the height of the column minus the height of the column (which equals zero) load more. that's why your loadMore() is called at the top of your col.

Try:

$('#col2').scroll(function(){
    if ($('#col2').scrollTop() == $('#col2').height()){
       loadMore();
    }
});

Answer 2

This has worked for me in the past.

var col = $('#col2');
col.scroll(function(){
   if (col.outerHeight() == (col.get(0).scrollHeight - col.scrollTop()))
       loadMore(); 
});

Here's a good explanation too.

Answer 3

The solution that jordanstephens posted is on the right track. However, what you need is not the height of #col2, you need the height of the parent element of #col2.

Example:

$('#col2').scroll(function(){
  if ($('#col2').scrollTop() == $('#col2').parent().height()) {
    loadMore();
  }
}