JSFiddle - React, Tailwind, and code Playground

by nate

HTML

<script src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.3.1-min.js"></script>
<div id="scrollable">
    <div class="elem"></div>
    <div class="elem"></div>
    <div class="elem"></div>
    <div class="elem"></div>
    <div class="elem"></div>
    <div class="elem"></div>
    <div class="elem"></div>
</div>
<div id="info"></div>

CSS

#scrollable {
    width: 300px;
    height: 400px;
    overflow-y: scroll;
    overflow-x: hidden;
    float: left
}
.elem {
    width: 100%;
    height: 100px;
    border: 1px solid black;
    margin: 0;
    margin-bottom: 5px;
}
#info {
    color: tomato;
    float: right;
    max-width: 300px;
    height: auto;
    font-size: 15px;
}

JavaScript

//scroll to the bottom programatically via jquery scrollTo
$().ready( function() {
    $("#scrollable")
        .addClass('programatically-scrolling')
        .scrollTo({
            top: $("#scrollable").prop("scrollHeight") - $("#scrollable").innerHeight(),
            left: 0
        }, 1000, {
            axis: 'y',
            onAfter: function () {
                $(this).removeClass('programatically-scrolling');
            }
        });

    // After some time REMOVE last element from the container
    setTimeout(function () {
        $("#scrollable div:last").remove();
    }, 2200);
    
    
    // A callback function prints all scroll events
    $("#scrollable").scroll(function (event) {
        console.log($(this).hasClass('programatically-scrolling'));
        //$("#info").append("scrolled  ");
    });
});