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

Question

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

Answer 1

@munch was closest, but if you have a border on the element, then you need to use .innerHeight() instead of .outerHeight() since the latter includes the border and .scrollTop() does not (.height() is also out if you have padding). Also, at least as of jQuery 1.7.1 and maybe earlier, I'd recommend using .prop('scrollHeight') instead of retrieving it directly from the DOM. I found some talk that the DOM scrollHeight is broken on IE 5-8 and the jQuery function abstracts that for me, at least on IE8.

var $col = $('#col2');
$col.scroll(function(){
if ($col.innerHeight() == $col.prop('scrollHeight') - $col.scrollTop())
    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.