JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<ul  class="scroll-class" id="idOfUl" >
    <li>
      You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow property when you want to have better control of the layout. The default value is visible.
    </li>
</ul>

CSS

.scroll-class {
    background-color: #00FFFF;
    width: 200px;
    height: 300px;
    overflow: scroll;
    transition:all 1s ease;
}
.scrolled {background-color: #FFF; transition:all 1s ease;}

JavaScript

$("#idOfUl").on( 'scroll', function(){ 
var scrollfromtop = $(this).scrollTop(); 
if(scrollfromtop == 0){
$(this).removeClass('scrolled');
}else{
$(this).addClass('scrolled');
}
});