JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://enscrollplugin.com/releases/enscroll-0.3.0.min.js"></script>
<div class="scrollbox">
    aasdfsdffsdafsdafsdafsdaf
    asd
    f
    sadf
    sda
    f
    sdaf
    sad
    fsad
    fsadfasd
    f
    asdf
    sad
    f
    sdaf
    dfs
    fds
    fds
</div>

<button class="addrow">add row</button>
<button class="scrollToBottom">Scroll To Bottom</button>

CSS

.scrollbox {
    overflow: auto; /* Start writing your markup with this style */
    width: 315px;   /* The dimensions of your content pane */
    height: 350px;
    border: 1px solid #b7b7b7;
    padding: 0 5px;
}

.vertical-track {
    width: 16px;              /* The width of the scrollbar */
    background-color: #ddd;   /* The color of the scrollbar track*/
}

.vertical-handle {
    width: 100%;
    background-color: #77f; /* The color of the scrollbar handle */
}

JavaScript

/*
 * Press Ctrl+Shift+Up to hide the left sidebar!
 *
 */

var newline = '<table><tr><td>jzehfz</td><td>uhzuifgeizfiyegfizgei</td></tr></table>';
$('.addrow').on('click', function() {
    $('.scrollbox').append(newline);
});

$('.scrollbox').enscroll();

$('.scrollToBottom').on('click', function() {
    $(".scrollbox").scrollTop($(".scrollbox")[0].scrollHeight);
});