JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content-scoller">
    <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
    <p>Curabitur vitae metus venenatis, tempor justo a, volutpat arcu. Aliquam dapibus porta ultricies. Cras tempus eget felis eu elementum. Donec tincidunt, tortor vel viverra facilisis, arcu augue tempus eros, eu varius dolor tellus eu mi. Vivamus lacinia nec nibh nec pulvinar. Vestibulum et tincidunt ligula. Praesent pretium quam odio, ac tristique tellus cursus vitae. Nam eget pulvinar mi.</p>
    <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
    <p>Curabitur vitae metus venenatis, tempor justo a, volutpat arcu. Aliquam dapibus porta ultricies. Cras tempus eget felis eu elementum. Donec tincidunt, tortor vel viverra facilisis, arcu augue tempus eros, eu varius dolor tellus eu mi. Vivamus lacinia nec nibh nec pulvinar. Vestibulum et tincidunt ligula. Praesent pretium quam odio, ac tristique tellus cursus vitae. Nam eget pulvinar mi.</p>
        <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
    <p>Curabitur vitae metus venenatis, tempor justo a, volutpat arcu. Aliquam dapibus porta ultricies. Cras tempus eget felis eu elementum. Donec tincidunt, tortor vel viverra facilisis, arcu augue tempus eros, eu varius dolor tellus eu mi. Vivamus lacinia nec nibh nec pulvinar. Vestibulum et tincidunt ligula. Praesent pretium quam odio, ac tristique tellus cursus vitae. Nam eget pulvinar mi.</p>
        <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
    <p>Curabitur vitae metus venenatis, tempor justo a, volutpat arcu. Aliquam dapibus porta ultricies. Cras tempus eget felis eu elementum. Donec tincidunt, tortor vel viverra facilisis, arcu augue tempus eros, eu varius dolor tellus eu mi. Vivamus lacinia nec nibh nec pulvinar. Vestibulum et tincidunt ligula. Praesent pretium quam odio, ac tristique tellus cursus vitae. Nam eget pulvinar mi.</p>
        <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
 ...

CSS

/* example styling */
body { background-color:#efefef; font-family:arial; font-size:1em;}
.content-scoller {overflow-y:hidden; height:300px; margin:30px; padding:20px; background-color:#fff;}
.content-scoller:hover { overflow-y:auto; }
.content-scoller.nottop { box-shadow:inset 0px 10px 15px -10px #ccc, inset 0px -10px 15px -10px #ccc;}
.content-scoller.scrolling { color:#999; }

JavaScript

$(".content-scoller").on("scroll",function() {
   _contentDiv = $(this);
   _contentDiv.addClass("scrolling"); 
    /* is it top ? */
    if(_contentDiv.scrollTop() ===0) { _contentDiv.removeClass("nottop"); }
    else { _contentDiv.addClass("nottop"); }
    /* have we stopped scrolling ? */
   	clearTimeout($.data(this, 'scrollTimer'));
	$.data(this, 'scrollTimer', setTimeout(function() { _contentDiv.removeClass("scrolling"); }, 100));
});