JSFiddle - React, Tailwind, and code Playground

by Roman Joseph Rimorin

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: 50px;
    height: 100px;
    overflow-y: hidden;
    overflow-x: auto;
}

JavaScript

$("#idOfUl").on( 'scroll', function(){
   console.log('Event Fired');
});