获取视口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。对于表格之类的东西，如果没有应用样式并且不存在多行单元格，则应该是这样。