JSFiddle - React, Tailwind, and code Playground

HTML

<button type="button" id="check_btn">Check</button >    
<div id="boundary">
    <table border="1">
        <tr id="r1">
            <td>row 1 col1</td>
            <td>row 1 col2</td>
            <td>row 1 col3</td>
            <td>row 1 col4</td>
        </tr>
        <tr id="r2">
            <td>row 2 col1</td>
            <td>row 2 col2</td>
            <td>row 2 col3</td>
            <td>row 2 col4</td>
        </tr>
        <tr id="r3">
            <td>row 3 col1</td>
            <td>row 3 col2</td>
            <td>row 3 col3</td>
            <td>row 3 col4</td>
        </tr>
        <tr id="r4">
            <td>row 4 col1</td>
            <td>row 4 col2</td>
            <td>row 4 col3</td>
            <td>row 4 col4</td>
        </tr>
        <tr id="r5">
            <td>row 5 col1</td>
            <td>row 5 col2</td>
            <td>row 5 col3</td>
            <td>row 5 col4</td>
        </tr>
        <tr id="r100">
            <td>row 100 col1</td>
            <td>row 100 col2</td>
            <td>row 100 col3</td>
            <td>row 100 col4</td>
        </tr>
    </table>
</div>

CSS

#boundary {
    position: relative;
    overflow: scroll;
    height: 100px;
}

JavaScript

function isElementInViewport(par, el) {
    var elRect = el.getBoundingClientRect(),
        parRect = par.getBoundingClientRect();
    return (
        elRect.top >= parRect.top &&
        elRect.left >= parRect.left &&
        elRect.bottom <= parRect.bottom &&
        elRect.right <= parRect.right
    );
}

function check() {
    var container = document.getElementById("boundary"),
        tr = container.getElementsByTagName("tr"),
        visible = [],
        i, j, cur;
    for (i = 0, j = tr.length; i < j; i++) {
        cur = tr[i];
        if (isElementInViewport(container, cur)) {
            visible.push(cur.id);
        }
    }
    console.log("Visible rows:", visible.join(", "));
}

function addEvent(element, eventName, callback) {
    if (element.addEventListener) {
        element.addEventListener(eventName, callback, false);
    } else if (element.attachEvent) {
        element.attachEvent("on" + eventName, callback);
    }
}

addEvent(window, "load", function () {
    addEvent(document.getElementById("check_btn"), "click", check);
    addEvent(document.getElementById("boundary"), "scroll", check);
});