One-by-one jQuery scrolling loader acting up in WebKit

Question

I've been working on a little experiment where, as you scroll, new entries are loaded onto a page.

You can see a practical example here.

Now, if you look at this Firefox everything works as it should. As you scroll towards the bottom of the page entries start to load but only one-by-one. View it in WebKit and instead it will start to load all of them at once and not stop until every available entry is loaded.

Here's my full javascript, courtesy of jQuery:

$(document).ready(function(){
    var loadedNum = 1;
    var loadInterval = 10;
    function loadMoreItems(){
        for(i=loadedNum; i<loadedNum+loadInterval; i++){
            $.get("ajax.html", function(data){
                $("#loader").append($("li:nth-child("+loadedNum+")",data));
                loadedNum++;
            });
        }
    }
    loadMoreItems();
    $(this).scroll( function(){
        var positionNum = $(this).scrollTop();
        var heightNum = $("#container").height();
        var topNum = $("#loader").position();
        var windowNum = $(window).height();

        var totalHeight = topNum.top+heightNum;
        var totalScrolled = positionNum+windowNum;

        if(totalHeight-totalScrolled<100){
            $.get("ajax.html", function(data){
                $("#loader").append($("li:nth-child("+loadedNum+")",data));
                loadedNum++;
            }); 
        }
        $("#position").css("top",totalScrolled-20);
        $("#position").text("total left is "+(totalHeight-totalScrolled)+"px");
    });
});

Anyone have any idea where I'm going wrong?

Answer 1

It works for me in Safari (don't have the WebKit browser though, so can't test it there), however I'd think the problem would be that the scroll total amount left would be calculated as being too small.