Get all elements in viewport Javascript

Question

I wonder if it is possible (in javascript or jquery but without any plugins) to get all elements (for example table rows tr) in current viewport without looping through each of them? I found a lot of examples how to check if specified element is in current viewport, but what I need is a function returns a list of all elements in current viewport. I need this for virtualization because this table should have an infinite capacity and looping through each row from two millions rows is quite inefficient :)

Is there any reasonable way to do this?

Answer 1

Assuming you're not doing anything fancy with positioning, table rows in the viewport can be found with a binary search. For example, for 200000 rows, about 18 lookups are required to locate the first row on the page (jsfiddle, warning: slow to load). This can be extended to find the last element as well, or you could just loop through the elements starting from the first until you find one that is no longer visible.

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;
}

Obviously this does not work well if anything is floated, absolutely positioned, etc. In short: The nodes being searched must be in order such that rows[N-1].top <= rows[N].top. For something such as a table, this should be true if no styling is applied and no multi-row cells exist.