JSFiddle - React, Tailwind, and code Playground

by justjohn

HTML

<div class="container">
    <ul>
        <li>Test 1</li>
        <li>Test 2</li>
        <li>Test 3</li>
        <li>Test 4</li>
        <li>Test 5</li>
        <li>Test 6</li>
        <li>Test 7</li>
        <li>Test 8</li>
        <li>Test 9</li>
        <li>Test 1</li>
        <li>Test 2</li>
        <li>Test 3</li>
        <li>Test 4</li>
        <li>Test 5</li>
        <li>Test 6</li>
        <li>Test 7</li>
        <li>Test 8</li>
        <li>Test 9</li>
        <li>Test 1</li>
        <li>Test 2</li>
        <li>Test 3</li>
        <li>Test 4</li>
        <li>Test 5</li>
        <li>Test 6</li>
        <li>Test 7</li>
        <li>Test 8</li>
        <li>Test 9</li>
    </ul>
</div>

CSS

.container {
    width: 300px;
    height: 50px;
    background: silver;
    overflow: scroll;
    display: block;
}
.container ul {
    width: 3000px;
}
.container li {
    display: inline-block;
    width: 70px;
}

JavaScript

var container = $(".container li").get(0);

$(".container").bind({
    scroll: function(e) {
        console.log("scroll: " + $(".container").scrollLeft());
    }
});

var old = {};

setInterval(function() {
    for (prop in container) {
        if (typeof container[prop]!== 'function') {
            if (container[prop] != old[prop]) {
                old[prop] = container[prop];
                console.log(prop + ": " + container[prop]);
            }
        }
    }
    
    console.log("Visible", $(container).is(':visible'));
}, 1000);