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

I know this question is already solved, but a concern when using jQuery scrollTOp() function on element other than on $(window).scrollTop() or $(document).scrollTop() since some issue like

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

Explain why scrollTop() always returns 0 here

$(document).scrollTop() always returns 0

So you can use

$(window).scrollTop() - $('your_selector').offset().top 

instead of

$('your_selector').scrollTOp() 

to avoid the jQuery scrollTOp() issue.

My suggestion is as follows:

   $(window).scroll(function() {
       var $more = $('#col2');
       var top = $(window).scrollTop() - $more.offset().top;
       if(top + $more.innerHeight() >= $more[0].scrollHeight) {
          loadMore();
       }
   });

Answer 2

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 3

The following has been tested, and works fine:

$(window).scroll(function() {
  if ($(window).scrollTop() == $(document).height() - $(window).height()) {
    loadMore();
  }
});

Answer 4

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

Answer 5

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

Answer 6

I found an alternative that works.

None of these answers worked for me (currently testing in FireFox 22.0), and after a lot of research I found, what seems to be, a much cleaner and straight forward solution.

Implemented solution:

function IsScrollbarAtBottom() {
    var documentHeight = $(document).height();
    var scrollDifference = $(window).height() + $(window).scrollTop();
    return (documentHeight == scrollDifference);
}

Resource: http://jquery.10927.n7.nabble.com/How-can-we-find-out-scrollbar-position-has-reached-at-the-bottom-in-js-td145336.html

Regards