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

Maybe the following will work:

1. HTML - wrap whatever is inside #col2 with another DIV, say #col2-inner
2. CSS - set a fixed height and 'overflow: auto' only for #col2

3. JS - see plugin below:

   $.fn.scrollPaging = function (handler) {
       return this.each(function () {
           var $this = $(this),
               $inner = $this.children().first();
   
           $this.scroll(function (event) {
               var scrollBottom = $this.scrollTop() + $this.height(),
                   totalScroll = $inner.height();
   
               if (scrollBottom >= totalScroll) {
                   handler();
               }
           });
   
       });
   };
   
   $('#col2').scrollPaging(loadMore);