JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <ul>
        <li id="one">el</li><li>el</li><li>el</li><li>el</li><li>el</li><li>el</li><li>el</li><li>el</li><li>el</li><li>el</li><li>el</li><li>el</li><li>el</li>
    </ul>
</div>

CSS

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
#container {
    height: 100px;
    width: 500px;
    border: 1px solid #000000;
    overflow: scroll;
}

JavaScript

var p = $('#one');
    var position0 = p.position().top;
    $('#container').scroll(function () {
        if (p.position().top != position0) {
            console.log('p.position: ' + p.position().top);
            $('#container').css('background-color', 'pink');
        }
    });