JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container-wrap">
    <div class="container">
        text<br />
        text<br />
        text<br />
        text<br />
        text<br />
        text<br />
        text<br />
        text<br />
        text<br />
        text<br />
        text<br />
        text<br />
        text<br />
        text<br />
        text<br />
        text<br />
        text<br />
        text<br />
        text<br />
        text<br />
        text<br />
        text<br />
        text<br />
        text<br />
        text<br />
        text<br />
        text<br />
        text<br />
        text<br />
        text<br />
        text<br />
        text<br />
    </div>
</div>

CSS

.container-wrap {
    width: 100px;
    height: 100px;
    overflow: hidden;
    border: 1px solid #eee;
}
.container {
    height: 100%;
    margin-right: -17px;
    overflow-y: scroll;
}

JavaScript

var gradientSize = 20;

$('.container').on('scroll', function() {
    var $container = $(this);
    var scrollHeight = $container[0].scrollHeight;
    var scrollMax = scrollHeight - $container.height();
    var scrollTop = $container.scrollTop();
    var scrollBottom = scrollMax -  scrollTop;
    console.log(scrollTop, scrollBottom);
    makeShadow($container, gradientSize * scrollTop / scrollMax, gradientSize * scrollBottom / scrollMax)
}).trigger('scroll');


function makeShadow($div, top, bottom) {
    //$div.css('background', 'linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0) 20px)');
    $div.css({'background-image': 'linear-gradient(to top, rgba(0,0,0,0.5), rgba(0,0,0,0) ' + bottom + 'px),linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0) ' + top + 'px)'})
    //linear-gradient(to bottom, #000, #fff 20px)
}