JSFiddle - React, Tailwind, and code Playground

by skram

HTML

<div id="scrollingDiv">
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />    
</div>

CSS

#scrollingDiv {
    height: 150px;
    width: 170px;
    overflow: auto;
    border: 1px dashed #EBC211;
}

JavaScript

var isScrolling = false;
var refreshTimer = null;
$(function() {

    $('#scrollingDiv').on('scroll', function() {
        isScrolling = true;
        if (refreshTimer != null) {
            clearInterval(refreshTimer);
            refreshTimer = null;
        }
    });

    //polling to see if still scrolling
    var pollScrolling = setInterval(function() {
        isScrolling = false;
        
        if (refreshTimer == null) {
            refreshTimer = setInterval(refreshContent, 5000);
        }

    }, 500);

    refreshTimer = setInterval(refreshContent, 5000);

    function refreshContent() {
        if (!isScrolling) {
            $('#scrollingDiv').prepend('Latest Content <br />');
            //$('#leftside div#alerts_wrapper').load('staffhome.php #alerts_container');            
        }
    }

});