JSFiddle - React, Tailwind, and code Playground

HTML

<body  >
<div id="div1">
    <textarea></textarea>
</div>
</body>

CSS

/*begin*/
    .scrobar_textarea {position: relative;}
    textarea {border: 1px solid;line-height: 14px;font-size: 14px; 
        padding: 2px; margin: 4px;height: 50px; overflow:hidden;width: 200px;}
    /*end*/

    /*for srcollbar*/
    .mTEXTAREA_scrollTools {
        height: 100%;
        right: 0;
        top: 0;
        width: 8px;
        position: absolute;
        display: block;
    }
    .mTEXTAREA_scrollTools .mTEXTAREA_draggerContainer {
        bottom: 0;
        height: 100%;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
    }
    .mTEXTAREA_scrollTools .mTEXTAREA_draggerContainer .mTEXTAREA_draggerRail {
        background-color: #000;
        border-radius: 2px;
        height: 100%;
        opacity: 0.1;
        filter: alpha(opacity = 10);
        width: 90%;
    }
    .mTEXTAREA_scrollTools .mTEXTAREA_draggerContainer .mTEXTAREA_dragger {
        cursor: pointer;
        width: 100%;
        position: absolute;
    }
    .mTEXTAREA_scrollTools .mTEXTAREA_draggerContainer .mTEXTAREA_dragger .mTEXTAREA_dragger_bar {
        background-color: #444548;
        border-radius: 2px;
        cursor: pointer;
        height: 100%;
        opacity: 0.75;
        filter: alpha(opacity = 75);
        width: 8px;
        position: relative;
    }
    .mTEXTAREA_scrollTools .mTEXTAREA_draggerContainer .mTEXTAREA_dragger .mTEXTAREA_dragger_bar:hover {
        background-color: #000;
        opacity: 0.85;
    }

    /*end*/

JavaScript

/**
 * @version v0.1 (01/2014)
 *
 * Authors:
 *   blue
 *
 * usage example : 
 *	1:$('#div1 textarea').textareaScroll();
*/


/*begin mousewheel*/
(function($) {

	var types = ['DOMMouseScroll', 'mousewheel'];

	if ($.event.fixHooks) {
	    for ( var i=types.length; i; ) {
	        $.event.fixHooks[ types[--i] ] = $.event.mouseHooks;
	    }
	}

	$.event.special.mousewheel = {
	    setup: function() {
	        if ( this.addEventListener ) {
	            for ( var i=types.length; i; ) {
	                this.addEventListener( types[--i], handler, false );
	            }
	        } else {
	            this.onmousewheel = handler;
	        }
	    },
	    
	    teardown: function() {
	        if ( this.removeEventListener ) {
	            for ( var i=types.length; i; ) {
	                this.removeEventListener( types[--i], handler, false );
	            }
	        } else {
	            this.onmousewheel = null;
	        }
	    }
	};

	$.fn.extend({
	    mousewheel: function(fn) {
	        return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
	    },
	    
	    unmousewheel: function(fn) {
	        return this.unbind("mousewheel", fn);
	    }
	});


	function handler(event) {
	    var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;
	    event = $.event.fix(orgEvent);
	    event.type = "mousewheel";
	    
	    // Old school scrollwheel delta
	    if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta/120; }
	    if ( orgEvent.detail     ) { delta = -orgEvent.detail/3; }
	    
	    // New school multidimensional scroll (touchpads) deltas
	    deltaY = delta;
	    
	    // Gecko
	    if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
	        deltaY = 0;
	        deltaX = -1*delta;
	    }
	    
	    // Webkit
	    if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; }
	    if ( orgEvent.wheelDeltaX !== undefined ) {...