JSFiddle - React, Tailwind, and code Playground

HTML

<table id="data">
</table>
<div style="position: fixed; top: 0; right: 0; border: 1px solid black; background-color: white; width: 20em">
    <p>Scroll position: <span id="scrollpos"></span></p>
    <p>Rows checked: <span id="count"></span></p>
    <p>First row: <span id="first"></span></p>
    <p><input type="button" id="recheck" value="Recheck" />
</div>

JavaScript

$(function() {
    var table = $("#data");
    var html = [];
    for(var r = 0; r < 200000; r++) {
        html.push("<tr><td>R" + r + "</td></tr>");
    }
    table.html(html.join(''));
    var rows = table.children().children();
    
    $("#recheck").click(function() {
        var scrollpos = $(document).scrollTop();
        var start = 0;
        var end = rows.length;
        var count = 0;
        
        while(start != end) {
            count++;
            var mid = start + Math.floor((end - start) / 2);
            if($(rows[mid]).offset().top < scrollpos)
                start = mid + 1;
            else
                end = mid;
        }
        
        $("#scrollpos").html("" + scrollpos);
        $("#first").html($($(rows[start]).children()[0]).html());
        $("#count").html("" + count);
    });
});