JSFiddle - React, Tailwind, and code Playground

by 3gwebtrain

HTML

<button>Add Element </button>
<div id="container">
    <ul></ul>
</div>

CSS

#container{
    border: 2px dashed gray;
    height: 200px;
    overflow : auto;
}

JavaScript

var text = 0;
var $cont = $('#container');
var contH = $cont.outerHeight();

$('button').on("click", function () {   
    
    var $li = $("<li />", { text: "list : "+ (++text)});
    $("ul").append($li);
    var contSH = $cont[0].scrollHeight;
    
    $cont.stop().animate({
        scrollTop : contSH - contH
    }, 400);

});