JSFiddle - React, Tailwind, and code Playground

by Prasanth AR

HTML

<div id="messages">
    xxx<br/>
    xxx<br/>
    xxx<br/>
    xxx<br/>
    xxx<br/>
    xxx<br/>
    xxx<br/>
    xxx<br/>
    xxx<br/>
    xxx<br/>
    xxx<br/>
    xxx<br/>
    xxx<br/>
    xxx<br/>
    xxx<br/>
    xxx<br/>
    xxx<br/>
    xxx<br/>
    xxx<br/>
    xxx<br/>
    xxx<br/>
    xxx<br/>
    xxx<br/>
    xxx<br/>
    xxx<br/>
    xxx<br/>
    xxx<br/>
    xxx<br/>
    xxx<br/>
    xxx<br/>
    xxx<br/>
    xxx<br/>
    xxx<br/>
    xxx<br/>
    xxx<br/>
</div>

CSS

#messages {
    border: 1px solid black;
    height: 200px;
    overflow: auto;
}

JavaScript

function getMessages(letter) {
    var div = $("#messages");
    div.scrollTop(div.prop('scrollHeight'));
}

$(function() {
    getMessages();
});