JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="ul">
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li class="red">hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
</ul>

<BR>

<input type="button" value="CHECK VISIBLITY" id="run" />

<BR><BR>
<pre id="debug"></pre>

CSS

#ul {
    display: block;
    height: 400px;
    width: 600px;
    overflow: auto;
}

#ul li {
    font-size: 26pt;
    font-family: courier new;
}

.red {
    color: red;
}

body, ul {
    /* for testing purposes */
    margin: 0;
    padding: 0;
}

JavaScript

var ul = document.getElementById('ul');
var li = document.getElementsByClassName('red')[0];
var debug = document.getElementById('debug');

function elementInViewOfParent(elem) {
    var container = elem.parentNode;
    return (container.scrollTop + container.offsetHeight) >= elem.offsetTop &&
           (container.scrollTop - elem.offsetHeight) <= elem.offsetTop;
}

function doDebug() {
    debug.innerHTML = 'Visible: ' + (elementInViewOfParent(li) ? 'YES' : 'NO') + '\n\n' +
        'container.offsetTop: ' + ul.offsetTop + '\n' +
        'container.scrollTop: ' + ul.scrollTop + '\n' +
        'container.offsetHeight: ' + ul.offsetHeight + '\n' +
        'elem.offsetTop: ' + li.offsetTop + '\n' +
        'elem.scrollTop: ' + li.scrollTop + '\n' +
        'elem.offsetHeight: ' + li.offsetHeight;
}

document.getElementById('run').onclick = doDebug;
doDebug();