获取视口Javascript中的所有元素

Question

我想知道是否有可能（在 javascript 或 jquery 中，但没有任何插件）在当前视口中获取所有元素（例如表行 tr）而不遍历每个元素？我找到了很多示例如何检查指定元素是否在当前视口中，但我需要的是一个函数返回当前视口中所有元素的列表。我需要这个来进行虚拟化，因为这个表应该有无限的容量，并且从两百万行中循环遍历每一行是非常低效的 :)

有什么合理的方法可以做到这一点吗？

Answer 1

假设您没有在定位方面做任何花哨的事情，可以通过二分搜索找到视口中的表行。例如，对于 200000 行，大约需要 18 次查找才能找到页面上的第一行（jsfiddle，警告：加载缓慢）。这也可以扩展为查找最后一个元素，或者您可以从第一个元素开始循环遍历元素，直到找到不再可见的元素。

var rows = table.children().children();
var start = 0;
var end = rows.length;
var count = 0;

while(start != end) {
    var mid = start + Math.floor((end - start) / 2);
    if($(rows[mid]).offset().top < document.documentElement.scrollTop)
        start = mid + 1;
    else
        end = mid;
}

显然，如果任何东西是浮动的、绝对定位的等，这将无法正常工作。简而言之：被搜索的节点必须按照rows[N-1].top <= rows[N].top 的顺序排列。对于诸如表格之类的东西，如果没有应用样式并且不存在多行单元格，这应该是正确的。