JSFiddle - React, Tailwind, and code Playground

HTML

<p>Green : Element Visible, Red : Element Invisible.</p>
<div id="button">
    <button onclick="runTheTest()">Run the test</button>
</div>
<div id="test">
    <div id="testarea"></div>
    <div id="result"></div>
</div>

CSS

#test {
    position: relative;
}
#testarea {
    position: relative;
    width: 250px;
    margin: 0 auto;
    overflow: auto;
    height: 50px;
}
#testarea > span {
    background-color: #F2F2F2;
    border:1px solid red;
}
#testarea > span, #result > span {
    -moz-box-sizing: border-box;
    box-sizing:border-box;
    display: inline-block;
    width: 50px;
    height: 50px;
    line-height:50px;
    text-align:center;
}
#result {
    position: absolute;
    overflow: visible;
}
#result > span {
    position: absolute;
    display: inline-block;
    padding: 20px;
    border: 2px solid green;
}

JavaScript

var visibleY = function (el) {
    var top = el.getBoundingClientRect().top,
        rect, el = el.parentNode;
    do {
        rect = el.getBoundingClientRect();
        if (top <= rect.bottom === false) return false;
        el = el.parentNode;
    } while (el != document.body);
    // Check its within the document viewport
    return top <= document.documentElement.clientHeight;
};

var ta = document.getElementById('testarea');

// res.offset(ta.offset());

var str = [];
for(var i = 0; i < 100; i++) str.push('<span>', i, '</span>');
ta.innerHTML = str.join('');

function runTheTest(){
    var children = ta.children;
    for (var i = 0; i < children.length; i++) {
        var vis = visibleY(children[i]);
        if (!vis) children[i].style.color = 'red';
        if (vis) children[i].style.color = 'green';
    }
}