JSFiddle - React, Tailwind, and code Playground

by Joe Mottershaw

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<div id="header"></div>

    <div id="chatlist" class="mousescroll">
    <ul>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>
</div>

CSS

body { margin: 0; padding: 0; }

#header {
    width: 100%;
    height: 50px;
    background: #111;
}

#chatlist {
    width: 100%;
    padding: 10px;
}

div.mousescroll {
    overflow: hidden;
}
div.mousescroll:hover {
    overflow-y: scroll;
}
ul {
    list-style-type: none;
}

JavaScript

/*! Copyright (c) 2011 Piotr Rochala (http://rocha.la)
 * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
 * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
 *
 * Version: 0.2.5
 * 
 */
(function($) {

    jQuery.fn.extend({
        slimScroll: function(o) {

            var ops = o;
            //do it for every element that matches selector
            this.each(function() {

                var isOverPanel, isOverBar, isDragg, queueHide, barHeight, divS = '<div></div>',
                    minBarHeight = 30,
                    wheelStep = 30,
                    o = ops || {},
                    cwidth = o.width || 'auto',
                    cheight = o.height || '250px',
                    size = o.size || '7px',
                    color = o.color || '#000',
                    position = o.position || 'right',
                    opacity = o.opacity || .4,
                    alwaysVisible = o.alwaysVisible === true;

                //used in event handlers and for better minification
                var me = $(this);

                //wrap content
                var wrapper = $(divS).css({
                    position: 'relative',
                    overflow: 'hidden',
                    width: cwidth,
                    height: cheight
                }).attr({
                    'class': 'slimScrollDiv'
                });

                //update style for the div
                me.css({
                    overflow: 'hidden',
                    width: cwidth,
                    height: cheight
                });

                //create scrollbar rail
                var rail = $(divS).css({
                    width: '15px',
                    height: '100%',
                    position: 'absolute',
                    top: 0
                });

                //create scrollbar
                var bar = $(divS).attr({
                    'class': 'slimScrollBar ',
          ...