JSFiddle - React, Tailwind, and code Playground

HTML

<a href="javascript:;" id="scroll_enable_disable" class="disabled">Habilitar scroll Automatico</a>
<textarea id="msg" cols="30" rows="10"></textarea>
<button id="send_msg">Enviar</button>

<ul id="list_msg" data-scroll-habilitado="true">
    
</ul>

CSS

#list_msg{
    width: 200px;
    height: 250px;
    overflow: auto;
    background: #f2f2f2;
    padding: 0;
}

#list_msg li{
    list-style: none;
    padding: 10px;
    border-bottom: 1px solid #CCC;
    
}

#scroll_enable_disable{
    display: block;
}
}

JavaScript

$(document).ready(function(){
    var msg = $("#msg");

    $("#send_msg").click(function(){
        if(msg.val().length >= 1){
            $("#list_msg").append("<li>"+msg.val()+"</li>")
            msg.val("").focus();
        }

       // verifica se o scroll automático está habilitado (atualmente)

        if ($("#list_msg").data('scroll-habilitado') === true) {
              var scrollHeight = $("#list_msg").prop('scrollHeight');
              $("#list_msg").scrollTop(scrollHeight);
        }
    })

    $("#scroll_enable_disable").click(function(){
        var currentStatus = $("#list_msg").data('scroll-habilitado');
       // faz o toggle de status
       $("#list_msg").data('scroll-habilitado', !currentStatus);
    })
})