JSFiddle - React, Tailwind, and code Playground

by akhildev

HTML

<ul class="one">
    <div>element 1</div>
    <div>element 2</div>
    <div class="div-30">element 3
    </div>
    <div>element 4</div>
    <div>element 5</div>
</ul>
Visible elements: 
<span id="visible-items"></span>

CSS

ul {
    height:130px;
    border:1px solid black;
    overflow:scroll;
}
div {
    height:40px;
    margin:0;
    border:1px solid black;
}
.div-30{
  height:80px;
}

JavaScript

$('ul.one').scroll(function() {
    
    var $ul = $(this);
   
    $('#visible-items').html( '' );
    
    $ul.find('div').each( function (n) {

        var $this = $(this);
        
        if ( $this.position().top + $this.height() > 0 && $this.position().top < $ul.height() ) {     
            
            $('#visible-items').html(  $('#visible-items').html() + ', ' + $this.text() );
        }
    });
 
});