JSFiddle - React, Tailwind, and code Playground

by Mohamed Rias

HTML

<div class="box">
    <ul>
        <li>blah blah blah</li>
    </ul>
</div>
<input type='button' id='add' value='Add'>

CSS

div.box {
    width: 200px;
    height: 200px;
    background-color: #eee;
    margin: 10px;
    padding: 10px;
    overflow: auto;
}
div.status {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 10px;
}

JavaScript

$('input#add').click(function () {
    $('div.box ul').append('<li>blah blah </li>')
    var scroll = $("div.box").prop("scrollHeight") - $('div.box').height();
    $("div.box").scrollTop(scroll);
})