JSFiddle - React, Tailwind, and code Playground

by dipish

HTML

<ul id="myList">
</ul>

<button id="actionBtn">Add content</button>

CSS

#myList {
    width: 100px;
    height: 200px;
    overflow: hidden;
    border: solid 1px black;
}

    #myList li {
    list-style-type: none;
    padding: 5px 0;
    }

JavaScript

function appendElement(el) {
    var scrollTop = el[0].scrollTop;

    // dirty but works to make the point
    el.html(el.html() + '<li>' + Math.floor(Math.random() * 10000000) + '</li>');
    debugger;
    el.scrollTop(scrollTop);
            
    el.animate({scrollTop: el[0].scrollHeight}, 'slow');
}
            
listEl = $('#myList');
$('#actionBtn').click(function() {appendElement(listEl);})