JSFiddle - React, Tailwind, and code Playground

by Eric Howe

HTML

<br><br><br>
<div id="scrollingDiv">
    <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
        <li>Five</li>
        <li>Six</li>
        <li>Seven</li>
        <li>Eight</li>
        <li>Nine</li>
        <li>Ten</li>
        <li>Eleven</li>
    </ul>
</div>

CSS

#scrollingDiv {
    overflow-y: auto;
    height: 100px;
    border: 1px solid black;
}
li {
    display: block;
    border: 1px solid red;
    margin: 5px 0;
    font-size: 20px;
}

JavaScript

var base = $('#scrollingDiv').offset().top;
var offs = [ ];
$('li').each(function() {
    var $this = $(this);
    offs.push({
        offset: $this.offset().top - base,
        height: $this.height(),
        text:   $this.text()
    });
});
$("#scrollingDiv").scroll(function() {
    var y = this.scrollTop;
    for(var i = 0; i < offs.length; ++i) {
        if(y < offs[i].offset
        || y > offs[i].offset + offs[i].height)
            continue;
        console.log(offs[i].text);
        return;
    }
});