JSFiddle - React, Tailwind, and code Playground

HTML

<div class="list">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

CSS

.list { height: 300px; overflow: auto; width: 200px; }
.list div
{
    height: 60px;
    margin: 10px 0;
    background: gray;
    color: white;
}

JavaScript

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

$(".list").scroll(function(e) {
    var $list = $(this);
    
    $list.find("div")
        .filter(function(i, d) {
            return isScrolledIntoView(d);
        })
        .each(function() {
            var eTop = $(this).offset().top;
            var center = $list.height() / 2;
            
            var dif = center - eTop;
            if (dif < 0) dif *= -1;
            
            var pc = 1 - (dif / center);
            
            $(this).css("opacity", pc);
        });
});