JSFiddle - React, Tailwind, and code Playground

by Tushar Jadhav

HTML

<div class='list'>
    <table>
        <tr>
            <td>item</td>
        </tr>
        <tr>
            <td>item</td>
        </tr>
        <tr>
            <td>item</td>
        </tr>
        <tr>
            <td>item</td>
        </tr>
        <tr>
            <td>item</td>
        </tr>
        <tr>
            <td>item</td>
        </tr>
        <tr>
            <td>item</td>
        </tr>
        <tr>
            <td>item</td>
        </tr>
        <tr>
            <td>item</td>
        </tr>
        <tr>
            <td>item</td>
        </tr>
        <tr>
            <td>item</td>
        </tr>
        <tr>
            <td>item</td>
        </tr>
        <tr>
            <td>item</td>
        </tr>
        <tr>
            <td>item</td>
        </tr>
        <tr>
            <td>item</td>
        </tr>
        <tr>
            <td>item</td>
        </tr>
    </table>
</div>

CSS

.list {
    height: 112px;
    width: 300px;
    display: block;
    overflow-y: scroll;
}
table tr td {
    width: 300px;
    height: 50px;
    background-color: gray;
    border: 1px solid #000;
}

JavaScript

$(document).ready(function () {
    // Get viewport height, gridTop and gridBottom
    var gridTop = 0,
        gridBottom = $('.list').outerHeight();
    console.log(gridBottom);
    $('.list').on('scroll', function () {
        // On each scroll check if `li` is in interested viewport
        $('.list td').each(function () {
            var thisTop = $(this).offset().top;
            console.log(thisTop);
            console.log(gridTop);
            // Check if this element is in the interested viewport
            if (thisTop >= gridTop && (thisTop + $(this).height()) <= gridBottom) {
                $(this).css('background', 'red');
            } else {
                $(this).css('background', 'gray');
            }
        });
    });
});