JSFiddle - React, Tailwind, and code Playground

by rajaadil

HTML

<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: 100px;
    overflow: scroll;
}

JavaScript

document.addEventListener('scroll', function (event) {
    if (event.target.id === 'idOfUl') { // apply any filtering condition        
        console.log('scroll event', event.target);
    }
}, true /*Capture event*/);