JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parentDivStyle" id="p">
<div class="childDivStyle">1</div>
<div class="childDivStyle">2</div>
<div class="childDivStyle">3</div>
<div class="childDivStyle">4</div>
<div class="childDivStyle">5</div>
</div>

CSS

.parentDivStyle{
overflow:hidden;
width:300px;
height:50px;
position:absolute;
background:#ccc;
    float:left; 
}

.childDivStyle{
width:100px;
height:50px;
position:relative;
float:left; 
background:red;
border: 1px solid black;   
}

JavaScript

$("#p").children().each(
        function(idx, el) { 
            var pos = $(el).position();
            
            console.log("child " + $(el).text() + " is visible: " + isVisible(pos.left, pos.top));
    });

function isVisible(x, y) {
    var pos = $("#p").position();
    var left = pos.left;
    var right = left + $("#p").width();
    var top = pos.top;
    var bottom = top + $("#p").height();    

    x += left;
    y += top;
    return (x >= left && x < right) && (y >= top && y < bottom);
}