jQuery looking for scroll height code to determine when to add new items to lazy loading scrollable div [jsFiddle attached]
<p>I have a large array of items that I render with jQuery templates. I want to render 50 or so at a time, and show more when the user scrolls down. I'm trying to find the correct logic on working with the scroll bar. I am doing something like this, but the scrolling is still a bit wonky:</p>

<pre><code>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() &gt; .5 * wrapper.children().length * wrapper.children().first().outerHeight())
            {
                renderItems(listItems, wrapper, 30);
            }
        });          
</code></pre>

<p>View this jsFiddle I wrote, it's a great example of what I need.</p>

<p><a href="http://jsfiddle.net/8rWTg/32/" rel="nofollow">http://jsfiddle.net/8rWTg/32/</a></p>

<p>Here's what's not working for me. I want to items to get added when you're about 80% through the list, however, with the logic I made, it happens at varying points depending on the number of items in the list, and between browsers.</p>
