我尝试基于虚拟渲染概念渲染列表。我面临一些小问题，但它们不会阻止行为。这是工作小提琴http://jsfiddle.net/53N36/9/，这是我的问题
1.最后的项目是不可见的，我假设一些地方我错过了索引。（固定，请参阅编辑）
1.如何计算scrollPosition，如果我想添加自定义滚动到这个。
1.这是最好的方法还是别的方法？
我已经测试了它与700000项目和70个项目在 chrome 。下面是代码
(function () {
var list = (function () {
var temp = [];
for (var i = 0, l = 70; i < l; i++) {
temp.push("list-item-" + (i + 1));
}
return temp;
}());
function listItem(text, id) {
var _div = document.createElement('div');
_div.innerHTML = text;
_div.className = "listItem";
_div.id = id;
return _div;
}
var listHold = document.getElementById('listHolder'),
ht = listHold.clientHeight,
wt = listHold.clientWidth,
ele = listItem(list[0], 'item0'),
frag = document.createDocumentFragment();
listHold.appendChild(ele);
var ht_ele = ele.clientHeight,
filled = ht_ele,
filledIn = [0];
for (var i = 1, l = list.length; i < l; i++) {
if (filled + ht_ele < ht) {
filled += ht_ele;
ele = listItem(list[i], 'item' + i);
frag.appendChild(ele);
} else {
filledIn.push(i);
break;
}
}
listHold.appendChild(frag.cloneNode(true));
var elements = document.querySelectorAll('#listHolder .listItem');
function MouseWheelHandler(e) {
var e = window.event || e;
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
console.log(delta);
//if(filledIn[0] != 0 && filledIn[0] != list.length){
if (delta == -1) {
var start = filledIn[0] + 1,
end = filledIn[1] + 1,
counter = 0;
if (list[start] && list[end]) {
for (var i = filledIn[0]; i < filledIn[1]; i++) {
if (list[i]) {
(function (a) {
elements[counter].innerHTML = list[a];
}(i));
counter++;
}
}
filledIn[0] = start;
filledIn[1] = end;
}
} else {
var start = filledIn[0] - 1,
end = filledIn[1] - 1,
counter = 0;
if (list[start] && list[end]) {
for (var i = start; i < end; i++) {
if (list[i]) {
(function (a) {
elements[counter].innerHTML = list[a];
}(i));
counter++;
}
}
filledIn[0] = start;
filledIn[1] = end;
}
}
//}
}
if (listHold.addEventListener) {
listHold.addEventListener("mousewheel", MouseWheelHandler, false);
listHold.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
} else listHold.attachEvent("onmousewheel", MouseWheelHandler);
}());请在这方面给我建议。
**编辑：**我又试了一次，我能够修复索引问题。http://jsfiddle.net/53N36/26/但我如何根据当前显示的数组列表计算滚动位置？
2条答案
按热度按时间ztmd8pv51#
Is this the best method or any other?我认为让这件事变得容易得多的是不要试图自己处理滚动。
在**this fiddle**中，我展示了你可以让浏览器为你处理滚动，即使我们使用的是
virtual rendering。使用
.scrollTop，我可以检测浏览器认为用户正在查看的位置，并根据该位置绘制项目。您会注意到，如果您将
hidescrollbar设置为false，并且用户使用它来滚动，我的方法仍然可以正常运行。因此，对于
calculate scroll position，您可以只使用.scrollTop。至于自定义滚动，只需确保影响
#listHolder的.scrollTop并调用refreshWindow()即可来自小提琴的代码
gcuhipw92#
感谢代码Hashbrown，它真的帮助了。.回馈社区基于您的代码我试图创建一个完整的日志查看器与渲染，突出显示，filterin，搜索和更新capabilitiés..它是可用的在这个fiddle .一个例子的使用类的小提琴是