JSFiddle - React, Tailwind, and code Playground

HTML

<div id="scrollable">
    <div id="wrapper">
        <div id="a1" class="abc"></div>
        <div id="a2" class="abc"></div>
        <div id="a3" class="abc"></div>
        <div id="a4" class="abc"></div>
        <div id="a5" class="abc"></div>
        <div id="a6" class="abc"></div>
        <div id="a7" class="abc"></div>
        <div id="a8" class="abc"></div>
        <div id="a9" class="abc"></div>
        <div id="a10" class="abc"></div>
        <div id="a11" class="abc"></div>
        <div id="a12" class="abc"></div>
        <div id="a13" class="abc"></div>
        <div id="a14" class="abc"></div>
        <div id="a15" class="abc"></div>
        <div id="a16" class="abc"></div>
        <div id="a17" class="abc"></div>
        <div id="a18" class="abc"></div>
        <div id="a19" class="abc"></div>
        <div id="a20" class="abc"></div>
        <div id="a21" class="abc"></div>
        <div id="a22" class="abc"></div>
        <div id="a23" class="abc"></div>
        <div id="a24" class="abc"></div>
        <div id="a25" class="abc"></div>
        <div id="a26" class="abc"></div>
        <div id="a27" class="abc"></div>
        <div id="a28" class="abc"></div>
        <div id="a29" class="abc"></div>
        <div id="a30" class="abc"></div>
        <div id="a31" class="abc"></div>
        <div id="a32" class="abc"></div>
        <div id="a33" class="abc"></div>
        <div id="a34" class="abc"></div>
        <div id="a35" class="abc"></div>
        <div id="a36" class="abc"></div>
        <div id="a37" class="abc"></div>
        <div id="a38" class="abc"></div>
        <div id="a39" class="abc"></div>
        <div id="a40" class="abc"></div>
        <div id="a41" class="abc"></div>
        <div id="a42" class="abc"></div>
        <div id="a43" class="abc"></div>
        <div id="a44" class="abc"></div>
        <div id="a45" class="abc"></div>
        <div id="a46" class="abc"></div>
        <div id="a47" class="abc"></div>
        <div id="a48"...

CSS

#scrollable {width:200px; height:300px; overflow-y:scroll;}
#wrapper {float:left}
.abc {float:left; width:48px; height:48px; margin:1px; background-color:#CCCCCC;}

JavaScript

$("#wrapper").children("div:visible").css("background-color", "#00CC00");

var $sc = $('#scrollable');
$sc.scrollTop(Math.random() * $('#wrapper').height());
var ids = [];
$('.abc').each(function() {
    var c = $(this).position().top + $(this).height() / 2;
    if (c > 0 && c < $sc.height()) {
        $(this).css('background-color', 'blue');
        ids.push($(this).attr('id'));
    }
});
alert(ids);