JSFiddle - React, Tailwind, and code Playground

HTML

<div id="chat">
    <div class="wrapper">
        adsgasgda<br/>
        adsgasg<br/>
        asd<br/>
        adsgasgda<br/>
        adsgasg<br/>
        adsgasgda<br/>
        adsgasg<br/>
        adsgasgda<br/>
        adsgasg<br/>
        adsgasgda<br/>
        adsgasg<br/>
        adsgasgda<br/>
        adsgasg<br/>
        adsgasgda<br/>
        adsgasg<br/>
    </div>
</div>
<button>Add a line</button>

CSS

#chat
{
    width: 200px;
    height: 200px;
    border: 1px solid black;
    overflow-y: auto;
}

JavaScript

monitor = function() {
    var $this = $(this),
        wrap = $this.find('.wrapper'),
        height = $this.height(),
        maxScroll = wrap.height() - height,
        top = $this.scrollTop();
    if (maxScroll === top) {
        $this.addClass('atBottom');
    } else {
        $this.removeClass('atBottom');
    }
}
    window.setInterval(function() {
        monitor.call($('#chat').get(0));
    }, 350);
$('#chat').bind('addMessage', function(e, message) {
    var $this = $(this),
        top = $this.scrollTop(),
        scroll = $this.hasClass('atBottom');
    $this.find('.wrapper').append(message);
    if (scroll) {
        var wrap = $this.find('.wrapper'),
            height = $this.height(),
            maxScroll = wrap.height() - height
        $this.scrollTop(maxScroll);
    }
})
$('button').click(function() {
    $('#chat').trigger('addMessage', 'asdgagasdg<br/>');
});