JSFiddle - React, Tailwind, and code Playground

HTML

<p>This test checks the robustness of the isElementVisible function by using it to identify the location of visible elements with a green outline and hidden elements with a red outline.</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:  hidden;
    height:    50px;
}
#testarea > span {
    background-color: gray;
}
#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

function isElementVisible(el) {
    var rect     = el.getBoundingClientRect(),
        vWidth   = window.innerWidth || doc.documentElement.clientWidth,
        vHeight  = window.innerHeight || doc.documentElement.clientHeight,
        efp      = function (x, y) { return document.elementFromPoint(x, y) };     

    // Return false if it's not in the viewport
    if (rect.right < 0 || rect.bottom < 0 
            || rect.left > vWidth || rect.top > vHeight)
        return false;

    // Return true if any of its four corners are visible
    return (
          el.contains(efp(rect.left,  rect.top))
      ||  el.contains(efp(rect.right, rect.top))
      ||  el.contains(efp(rect.right, rect.bottom))
      ||  el.contains(efp(rect.left,  rect.bottom))
    );
}

var ta  = $('#testarea'),
    res = $('#result');

res.offset(ta.offset());

$(new Array(10)).map(function (idx) {
    var el = document.createElement('span');
    el.textContent = idx;
    return el;
}).appendTo('#testarea');

function runTheTest() {
   ta.children().map(function (idx, el) {
        var resEl = document.createElement('span'),
            vis   = isElementVisible(el);
        
        $(resEl).css({
            top:  el.offsetTop + 'px', 
            left: el.offsetLeft + 'px' 
        }).html('&nbsp;');
        
        if (!vis)
            resEl.style.borderColor = 'red';
        
        return resEl;
    }).appendTo(res);
}