Question

I’m trying to hack together an infinite scroll system for a site, but am running into problems.

There is basically a div with a whole lot of <li> elements.

This function slices the div and hides every <li> element after the first 20. Once scrolled to the bottom of the page it shows all and immediately slices to 40 and then hides again the rest again.

$("#CategoryContent li").slice(20).hide();    

$(window).scroll(function() {
       if($(window).scrollTop() + $(window).height() == $(document).height()) {
            $("#CategoryContent li").show();
           $("#CategoryContent li").slice(40).hide();
       }
    });

I pretty much want this to happen infinitely until all content is loaded.

Adding the same code with a different slice number obviously doesn’t work. So how would I go about that?

Store the value of the first slice in a variable and once the function has been executed increase that variable by 20?

I’ve searched for plug ins to take care of this for me but they all rely on pagination which currently isn’t an option.

Answer 1

I ended up doing this

var mincount = 20;
var maxcount = 40;


$(window).scroll(function() 
                    {
                    if($(window).scrollTop() + $(window).height() >= $(document).height() - 400) {
                            $("#CategoryContent li").slice(mincount,maxcount).fadeIn(800);

mincount = mincount+20;
maxcount = maxcount+20

}
});