Идея очень проста - есть большой список элементов которые должны отображаться в каком нибудь окошке - например список выбранных товаров. Их очень много(несколько тысяч) и браузер очень долго отображает весь этот список, плюс каждый элемент имеет свой уникальный идентификатор, в общем вся эта идея не должна нравиться браузеру.
Предполагаемый выход создание div ограничивающего общий обзор видимости(div_for_scroll), в нем большой div(scrolled_content_full) (его размер линейно зависит от реального количества элементов). Он нужен для получения нужного нам scroll. И уже в нем div(scrolled_content) сдвигаемый по вертикали в котором отображается список видимых в данный момент элементов.
Вот и вся идея.
Предполагаемый выход создание 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);