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(){
    var isEnd = $('div.box')[0].offsetHeight + $('div.box')[0].scrollTop == $('div.box')[0].scrollHeight;
   $('div.box ul').append('<li>blah blah' + isEnd + '</li>')
   if(!isEnd){
   var scroll = $("div.box").prop("scrollHeight") - $('div.box').height()
   $("div.box").scrollTop(scroll)  
    }
})