JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://github.com/brandonaaron/jquery-mousewheel/raw/master/jquery.mousewheel.js"></script>
<html>
    <body id="test">
    </body>
</html>

CSS

.scrollH {
    position: absolute;
    height:15px;
    width: 100%;
    bottom: 0px;
    left: 0px;
    z-index:50;
}

/* Start & End - Buttons */
.scrollH .start {
    background:yellow;
    background-repeat: no-repeat;
    background-position: -180px -0px;
    width:15px;
    height:15px;
}

.scrollH .start.disabled {
    background:darkyellow;
    background-repeat: no-repeat;
    background-position: -240px -0px;
    width:15px;
    height:15px;
}
.scrollH .end {
    background:yellow;
    background-repeat: no-repeat;
    background-position: -210px -0px;
    width:15px;
    height:15px;
}

.scrollH .end.disabled {
    background:darkyellow;
    background-repeat: no-repeat;
    background-position: -270px -0px;
    width:15px;
    height:15px;
}
/* Scroll Area */
.scrollH .empty { /* Main Container */
    position:relative;
    height:15px;
}
.scrollH .emptyStart {
}
.scrollH .empty {
    background-repeat:repeat-x;
    background:lightgreen;
    position:relative;
    padding:0px;
    margin:0px;
    width:100%;
    height: 15px;
}

.scrollH .space {
    width:10px;
}
.scrollH .emptyEnd {
}
.scrollH { /* contains ScrollBar */
    position:absolute;
}

/* ScrollBar */
.scrollH .bar {
    width:30px;
}
.scrollH .bar .start {
    /*background-repeat:repeat-y;*/
    background:green;
    background-repeat: no-repeat;
    background-position: -300px -0px;
    position:relative;
    float: left;
    width: 0px;
    height: 15px;
    margin: 0px;
    padding: 0px;
}
.scrollH .bar .scroll {
    background-repeat:repeat-x;
    background:green;
    position:relative;
    float: left;
    left:100%;
    height:15px;
    padding:0px;
    margin:0px;
}
.scrollH .bar .end {
    color:green;
    background:green;
    background-position: -330px -0px;
    position:relative;
    float: left;
    width: 0px;
    height: 15px;
    margin: 0px;
    padding: 0px;
}

JavaScript

/**
 * @public
 * @function
 * @name    toInt
 * @memberOf    iview.Utils
 * @description    converts a given String into an integer, but further doesn't give NAN for String was undefined and other cases
 * @param    {string} value which shall be converted into an integer
 * @return    {integer} of parsed string, 0 if var was undefined
 */
function toInt(value) {
    if (isNaN(parseInt(value))) {
        return 0;
    } else {
        return parseInt(value);
    }
}

/**
 * @public
 * @function
 * @name    toFloat
 * @memberOf    iview.Utils
 * @description    converts a given String into an float, but further doesn't give NAN for String was undefined and other cases
 * @param    {string} value which shall be converted into a float
 * @return    {float} of parsed string, 0 if var was undefined
 */
function toFloat(value) {
    if (isNaN(parseFloat(value))) {
        return 0;
    } else if (!isFinite(parseFloat(value))) {
        return Number.MAX_VALUE;
    } else {
        return parseFloat(value);
    }
}

var iview = iview || {};

iview.Event = function(sender) {
    this._sender = sender;
    this._listeners = [];
};

iview.Event.prototype = {
    attach : function(listener) {
        this._listeners.push(listener);
    },
    detach: function(listener) {
        for (var i = 0; i < this._listeners.length; i++) {
            if (this._listeners[i] == listener) {
                this._listeners[i].splice(i,1);
            }
        }
    },
    notify : function(args) {
        for (var i = 0; i < this._listeners.length; i++) {
            this._listeners[i](this._sender, args);
        }
    }
};

/**
 * @namespace
 * @name        iview
 */
var iview = iview || {};
/**
 * @namespace    Package for Scrollbar, contains Default Scrollbar Model, View and Controller
 * @memberOf     iview
 * @name        scrollbar
 */
iview.scrollbar = iview.scrollbar || {};
/**
 * @class
 * @constructor
 * @version        1.0
 * @memberOf    iview.scrollbar
 * @name       ...