Программный scroll на JQuery

Идея очень проста - есть большой список элементов которые должны отображаться в каком нибудь окошке - например список выбранных товаров. Их очень много(несколько тысяч) и браузер очень долго отображает весь этот список, плюс каждый элемент имеет свой уникальный идентификатор, в общем вся эта идея не должна нравиться браузеру.

Предполагаемый выход создание div ограничивающего общий обзор видимости(div_for_scroll), в нем большой div(scrolled_content_full) (его размер линейно зависит от реального количества элементов). Он нужен для получения нужного нам scroll. И уже в нем div(scrolled_content) сдвигаемый по вертикали в котором отображается список видимых в данный момент элементов.

Вот и вся идея.

HTML код:
<div id="div_for_scroll" style="height: 132px; overflow-y: scroll;">
<div id="scrolled_content_full" style="height: 1000px;">
<div id="scrolled_content" style="padding-top: 123px;">
This div contein scrolled content
</div>
</div>
</div>

Js код:

        var ElementsArray = {};
       
        //каждый элемент массива объект вида: {html:html, name:HumName, id:i}, имя нужно для сортировки.
       
        function refreshScroll() {

            var FontSize = 16;
            var newSize = parseInt((ElementsArray.length + 1.5) * FontSize);
            if (newSize<132)
                newSize = 132;
            jQuery("#scrolled_content_full").css("height", newSize + "px");
            var currpos = parseInt(jQuery("#div_for_scroll").scrollTop() / FontSize);
            var newHtml =  "";
            for (var i= currpos;i< (currpos + 10); i ++) {
                if (i < ElementsArray.length)
                    newHtml    += ElementsArray[i].html;
            }
           
            jQuery("#scrolled_content").html(newHtml);
            jQuery("#scrolled_content").css("padding-top",jQuery("#div_for_scroll").scrollTop());
        }

        jQuery("#div_for_scroll").scroll(refreshScroll);