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 element = document.querySelector('div.box'); 
    element.scrollTop = element.clientHeight;
    }
})