JSFiddle - React, Tailwind, and code Playground

mCustomScrollbar

HTML

<script src="http://www.maisondelacommunication.fr/js/jquery.mCustomScrollbar.concat.min.js"></script>
<link rel="stylesheet" href="http://www.maisondelacommunication.fr/css/jquery.mCustomScrollbar.css">
<div id="content">
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
</div>
<p id="button">Show Content</p>
<p id="button_close">Hide Content</p>

CSS

#content {
    display:none;
    overflow:hidden;
    text-align:left;
    width:150px;
    height:150px;
    background-color: #666;
    color:#fff;
}

JavaScript

$(document).ready(function () {
    $("#content").mCustomScrollbar({
        //horizontalScroll: true,
        scrollButtons: {
            enable: true
        },
        theme: "dark"
    });
});

$("#button").click(function () {
    $("#content").show();
    $("#content").mCustomScrollbar("update");
});

$("#button_close").click(function () {
    $("#content").hide();
});