JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="chat">
    <div class="chat__inner">
        <div class="messages">
            <p>Message 1</p>
            <p>Message 2</p>
            <p>Message 3</p>
            <p>Message 4</p>
            <p>Message 5</p>
            <p>Message 6</p>
            <p>Message 7</p>
            <p>Message 8</p>
            <p>Message 9</p>
            <p>Message 10</p>
            <p>
            Message 11
            </p>
        </div>
    </div>
</div>

CSS

.chat {
    position: relative;
    height: 200px;
    width: 200px;
    border: 1px solid #000;
    overflow: hidden;
}


.messages {
    overflow: auto;
    -webkit-user-select: none;
    -webkit-overflow-scrolling: touch;
    height: 200px;
    margin: auto;
}

JavaScript

$(document).ready(function(){
  //var oldscrollHeight = $(".messages").prop("scrollHeight") - 20; 
  //Scroll height before the request
  
  //--make request here--
  //var newscrollHeight = $(".messages").prop("scrollHeight") - 20; 
  //Scroll height after the request
  
  //if (newscrollHeight > oldscrollHeight) {
    $(".messages").animate({ scrollTop: 100000 }, 'fast');
  //}
})