JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://jscrollpane.kelvinluck.com/style/jquery.jscrollpane.css">
<script src="http://jscrollpane.kelvinluck.com/script/jquery.mousewheel.js"></script>
<script src="http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.min.js"></script>
<a href='javascript: null;' id='btn'>Add Content</a>
<div class='scroll-pane'>
    <p>Initial Content
Text echoed back to request
Text echoed back to request
Text echoed back to request
Text echoed back to request
    </p>
</div>

CSS

/* Styles specific to this particular page */
.scroll-pane
{
    width: 200px;
    height: 100px;
    overflow: auto;
}
.jspVerticalBar {
    width: 8px;
}

JavaScript

$(document).ready(function() {
    var settings = {
        showArrows: false
    };
    var api = $('.scroll-pane').jScrollPane(settings).data('jsp');
    api.reinitialise();

    $('#btn').click(function() {

        $.ajax({
            type: "POST",
            dataType: 'html',
            url: "/echo/html/",
            data: {
                html: "<p>Text echoed back to request</p>",
                delay: 0
            },
            success: function(data, textStatus, jqXHR) {
                api.getContentPane().append(data);
                api.reinitialise();
            }
        });

    });

});