JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="teste">
    <li>111111111111</li>
    <li>222222222222</li>
    <li>222222222222</li>
    <li>222222222222</li>
    <li>222222222222</li>
    <li>222222222222</li>
    <li>222222222222</li>
    <li>222222222222</li>
    <li>222222222222</li>
    <li>222222sasa222222</li>
    <li>222222222222</li>
    <li>222222222222</li>
    <li>22asa</li>
    <li>222222sasa222222</li>
    <li>222222sasa222222</li>
    <li>222222sasa222222</li>
   <li>222222sasa222222</li>
<li>222222sasa222222</li>
    
    <li>FINAL</li>
    
</ul>

CSS

ul {
    list-style: none;
    max-height:380px;
    width:500px;
    overflow-y:auto;
    padding:5px;
    background-color:#ccc;

     position: absolute;
    bottom:0;   
}
ul>li {
    height:80px;
    margin-bottom:5px;
    width:100%;
    background-color:#888;
}


ul::-webkit-scrollbar{
    display: none;

}

JavaScript

function updateScroll() {
    var element = document.getElementById("teste");
    element.scrollTop = element.scrollHeight;
}
updateScroll();

var timerId = window.setInterval(1, 1000);

setTimeout(function () {
    clearInterval(timerId)
}, 10000);