JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">	
			
			<div class="content" style="position: relative">
				<div class="scroll-pane b-scroll-test" id="left">
					<section class="manufacturers">
						<h1 class="h1 button1">Производители</h1>
						
						<article class="article">
							<h1 class="h1">Контактные линзы</h1>
							
							<ul>
								<li>
									<a href="#"><img class="radius7" alt="" width="176" height="36" src="images/manufacturers/img1.png" /></a>
								</li>
								
								<li>
									<a href="#"><img class="radius7" alt="" width="176" height="36" src="images/manufacturers/img1.png" /></a>
								</li>								
							</ul>
						</article>
						
						<article class="article">
							<h1 class="h1">Солнцезащитные очки</h1>
							
							<ul>
								<li>
									<a href="#"><img class="radius7" alt="" width="176" height="36" src="images/manufacturers/img1.png" /></a>
								</li>								
							</ul>
						</article>	

						<article class="article">
							<h1 class="h1">Очки для зрения</h1>
							
							<ul>
								<li>
									<a href="#"><img class="radius7" alt="" width="176" height="36" src="images/manufacturers/img1.png" /></a>
								</li>								
							</ul>
						</article>	

						<article class="article">
							<h1 class="h1">Очковые линзы</h1>
							
							<ul>
								<li>
									<a href="#"><img class="radius7" alt="" width="176" height="36" src="images/manufacturers/img1.png" /></a>
								</li>								
							</ul>
						</article>							
					</section>
					
					<section class="about_us">
						<h1 class="h1 button1">О нас</h1>
						
						<article class="article">
							<ul>
								<li>
									Внимание! В последнее время участились случаи, когда наши клиенты пытаются купить линзы непосредственно в офисе.
								</li>							
							</ul>
						</article>
					</section>

					<section class="docs">
						<h1 class="h1 button1">Документы</h1>
						
						<article...

CSS

.b-wrapper {
				width: 960px;
				margin: 0 auto;
			}

			.b-scroll-test {
				overflow: auto;
				max-height: 500px;

			}

			#trackV {
			  position: absolute;
			  width: 20px;
			  height: 500px;
			  left: 199px;
			}

			/* ====== trackV ====== */

			.rScrollbar__track-v {
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				width: 16px;
					-moz-border-radius: 7px;						
					-webkit-border-radius: 7px;	
					-khtml-border-radius: 7px;				
					border-radius: 7px;						
				
			}

				.rScrollbar__track-v .track {
					position: absolute;
					top: 11px;
					bottom: 11px;
					left: 0;
					width: 5px;
					-moz-border-radius: 7px;						
					-webkit-border-radius: 7px;	
					-khtml-border-radius: 7px;				
					border-radius: 7px;						
				}

					/* scroll bg */
					.rScrollbar__track-v .track .track-t,
					.rScrollbar__track-v .track .track-b {
						position: absolute;
						left: 0;
						width: 4px;
						background: #fff;
						border: 2px solid #d5d2d2;
						-moz-border-radius: 7px;						
						-webkit-border-radius: 7px;	
						-khtml-border-radius: 7px;				
						border-radius: 7px;							
						/*background: url('http://s4.hostingkartinok.com/uploads/images/2014/04/bf209760896753596313897f0faeb62b.png') no-repeat;*/
					}

					/* up arrow */
					.rScrollbar__track-v .track .track-t {
						top: 0;
						height: 5px;
						background-position: 0 0;
						display: none;
					}

					.rScrollbar__track-v .track .track-b {
						top: 5px;
						bottom: 0;
						background-position: -16px 100%;
						
					}

					/*handle*/
					.rScrollbar__track-v .bar {
						position: absolute;
						z-index: 1;
						top: 0;
						left: 2px;
						width: 4px;
						min-height: 20px;
						background: #b2b4b3;
						-moz-border-radius: 7px;						
						-webkit-border-radius: 7px;	
						-khtml-border-radius: 7px;				
						border-radius: 7px;							
					}

						.rScrollbar__track-v .bar .bar-t,
						.rScrollbar__track-v .bar .bar-b...

JavaScript

(function($, w, d) {
	// приватные методы
	function getIEVersion() {
		var rv = -1; // не IE
		
		if (navigator.appName == 'Microsoft Internet Explorer') {
			var ua = navigator.userAgent;
			var re  = new RegExp('MSIE ([0-9]{1,}[\.0-9]{0,})');
	
			if (re.exec(ua) != null) {
	  			rv = parseFloat(RegExp.$1);
	  		}
		}
		
		return rv;
	}

	function getScrollPos(elem, track, bar) {
		var px, py, x, y;

		px = elem.scrollLeft() / (elem[0].scrollWidth - elem.innerWidth());
		py = elem.scrollTop() / (elem[0].scrollHeight - elem.innerHeight());

		x = (track.width() - bar.width()) * px;
		y = (track.height() - bar.height()) * py;

		return {
			px: px,
			py: py,
			x: x,
			y: y
		};
	}

	function scrollV(pos, step, elem, track, bar) {
		var p;

		pos += step;

		if (pos < 0) {
			pos = 0;
		} else if (pos + bar.height() >= track.height()) {
			pos = track.height() - bar.height();
		}
						
		p = pos / (track.height() - bar.height());
						
		elem.scrollTop((elem[0].scrollHeight - elem.innerHeight()) * p);
		bar.css('top', pos + 'px');
	}

	function scrollH(pos, step, elem, track, bar) {
		var p;

		pos += step;

		if (pos < 0) {
			pos = 0;
		} else if (pos + bar.width() >= track.width()) {
			pos = track.width() - bar.width();
		}
						
		p = pos / (track.width() - bar.width());
						
		elem.scrollLeft((elem[0].scrollWidth - elem.innerWidth()) * p);
		bar.css('left', pos + 'px');
	}

	// публичные методы
	var methods = {
		init: function(options) {
			var defaults = $.extend(true, {
				classPrefix: 'rScrollbar',

				trackV: {
					container: null,
					scrollDelta: 20,
					scrollInterval: 100,
					
					track: {
						html: '',
						mouseOver: function() {},
						mouseOut: function() {},
						mouseDown: function() {},
						mouseUp: function() {},
						mouseClick: function() {}
					},

					butUp: {
						html: '',
						mouseOver: function() {},
						mouseOut: function() {},
						mouseDown: function() {},
						mouseUp: function()...