javascript - 获取视口(viewport)Javascript中的所有元素

Question

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

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

Answer 1

假设您没有对定位进行任何花哨的操作，则可以通过二分搜索找到视口(viewport)中的表格行。例如，对于 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;
}

显然，如果有任何东西是 float 的，绝对定位的，等等，这不能很好地工作。简而言之:正在搜索的节点必须按顺序排列，使得 rows[N-1].top <= rows[N].top 。对于表格之类的东西，如果没有应用样式并且不存在多行单元格，则应该是这样。