Alex Rivera | Logout

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

Asked 2010-05-14T21:27:21.360
10

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!

jquery scroll
Edit
Report

1 Answer

1

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();
  }
}
answered 2010-05-14T22:11:14.910

Your Answer