JSFiddle - React, Tailwind, and code Playground

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>        
    </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

function isScrolledIntoView(elem)
{
    var $elem = $(elem);
    var $window = $(".list");
    var docViewTop = $window.scrollTop();
    var docViewBottom = docViewTop + $window.height() + 5;
    var elemTop = $elem.offset().top;
    var elemBottom = elemTop + $elem.height();
    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
    
}

$(function() {
 $("td").each(function() {
  if (isScrolledIntoView(this)) $(this).css("background-color", "blue")
 })
})