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!

Ahmad Alfy
  • 13,107
  • 6
  • 65
  • 99
Jack
  • 9,615
  • 18
  • 72
  • 112

8 Answers8

24

The following has been tested, and works fine:

$(window).scroll(function() {
  if ($(window).scrollTop() == $(document).height() - $(window).height()) {
    loadMore();
  }
});
Panagiotis Panagi
  • 9,927
  • 7
  • 55
  • 103
  • 1
    It may be handy to wrap the function in a [debounce](http://lodash.com/docs#debounce) function, to improve performance. – Brian M. Hunt Oct 16 '12 at 02:45
14

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.

munch
  • 6,311
  • 4
  • 23
  • 27
  • I've looked at the explanation and tried out your example - but nothing happens. I really can't fathom out why. Any further ideas? – Jack May 14 '10 at 22:16
  • 1
    @Jack Webb-Heller - I can fathom why. I missed something kind of important. `scrollHeight` can't be used on the jquery object. you need to specify `col[0].scrollHeight` in order for it to work. I edited the answer to include that – munch May 14 '10 at 23:25
  • 1
    `col.get(0).scrollHeight` is a more appropriate jQuery way to deal with it – munch May 14 '10 at 23:36
  • 1
    Pretty much works for me, but there is a problem if there is also a horizontal scrollbar. A hackish fix: `if( col.outerHeight()+20 >= (col.get(0).scrollHeight - col.scrollTop()) )...` – travc Mar 03 '13 at 10:17
11

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();
    }
});
bimbom22
  • 4,510
  • 2
  • 31
  • 46
  • 1
    I'm afraid this doesn't work. I've copy-pasted it after typing it in manually, but, nothing happens. The original URL I got the original source from was this: http://www.webresourcesdepot.com/load-content-while-scrolling-with-jquery/ – Jack May 14 '10 at 21:40
2

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

Chandler Zwolle
  • 1,635
  • 1
  • 11
  • 8
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);
    
Ido Schacham
  • 340
  • 2
  • 12
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(); 
});
Community
  • 1
  • 1
Derek P
  • 51
  • 5
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();
  }
}
Mark
  • 5,680
  • 2
  • 25
  • 26
  • 1
    The parent element is basically $(document), #col2 is a top-level tag. I've tried this but still no luck. I can't really say much... as nothing happens! :S – Jack May 14 '10 at 22:16
  • if the parent is the document, then instead of $('#col2').parent().height() just use $(window).height() – Mark May 18 '10 at 08:10
0

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();
       }
   });
Community
  • 1
  • 1
Abu Sufian
  • 157
  • 1
  • 11