jQuery ищет код высоты прокрутки, чтобы определить, когда добавлять новые элементы в прокручиваемый div с отложенной загрузкой [jsFiddle прилагается]

У меня есть большой массив элементов, которые я отображаю с помощью шаблонов jQuery. Я хочу отображать 50 или около того за раз и показывать больше, когда пользователь прокручивает страницу вниз. Я пытаюсь найти правильную логику работы с полосой прокрутки. Я делаю что-то вроде этого, но прокрутка все еще немного шаткая:

var listItems = this.buildItemList(this.list, regex);    
        var renderItems = this.renderItems;
        renderItems(listItems, wrapper, 50);                    
        wrapper.scroll(function() {
            // This works, but doesn't work quite right. Looks a bit wonky.
            if (wrapper.scrollTop() > .5 * wrapper.children().length * wrapper.children().first().outerHeight())
            {
                renderItems(listItems, wrapper, 30);
            }
        });          

Просмотрите этот jsFiddle, который я написал, это отличный пример того, что мне нужно.

http://jsfiddle.net/8rWTg/32/

Вот что у меня не работает. Я хочу, чтобы элементы добавлялись, когда вы прошли около 80% списка, однако с моей логикой это происходит в разные моменты в зависимости от количества элементов в списке и между браузерами.