Sheepbar

https://github.com/SzymonLisowiec/Sheepbar

HTML

<div id="example" class="sheepbar" data-y="true">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse viverra lobortis urna quis cursus. In posuere ipsum lorem, non efficitur ex malesuada ut. Duis risus tellus, efficitur eget sem ut, efficitur dapibus elit. Sed ac mollis elit. Praesent id erat in sapien malesuada consectetur. Nulla nec magna sed diam pulvinar dapibus. Nulla luctus ex odio, et commodo sem aliquet a. Sed nec dignissim lectus, quis semper sapien. Aliquam erat volutpat. Vivamus viverra, velit ultrices sollicitudin commodo, arcu est gravida eros, in fermentum sem lectus vitae nulla. Nunc sit amet imperdiet arcu. Fusce imperdiet diam volutpat ex tincidunt tempor. Integer a interdum magna. Aliquam luctus lacus ut sagittis pharetra. Cras non orci urna. Integer dapibus justo sodales, porta velit et, tempus mi.</p>

</div>

CSS

#example {
  width: 60%;
  height: 500px;
  margin: 32px auto;
}

.sheepbar>.sheepbar-scrollbar>div {
  width: 100%;
  height: 96%;
  top: 2%;
  bottom: 2%;
  position: absolute;
  border-radius: 6px;
  background: #34495e;
  opacity: 0.52;
  transition: opacity 0.2s;
  cursor: pointer;
}

.sheepbar>.sheepbar-scrollbar.sheepbar-x>div {
  width: 96%;
  height: 100%;
  top: 0;
  right: 2%;
  bottom: 0;
  left: 2%;
}

.sheepbar>.sheepbar-scrollbar>div:hover, .sheepbar>.sheepbar-scrollbar>div:active { opacity: 0.88; }
.sheepbar>.sheepbar-scrollbar.sheepbar-x { height: 6px; bottom: 2px; }
.sheepbar>.sheepbar-scrollbar.sheepbar-y { width: 6px; right: 2px; }

JavaScript

function Sheepbar(config){
  'use strict';
  var SB = {
  	
    config: {
    	position: 'relative',
      callback_scroll: function(){},
      callback_mousedown: function(){},
      callback_mouseup: function(){},
      callback_mousemove: function(){},
      callback_resize: function(){}
    },
    elements: {},
    counter: 0,
    
  	init: function(e, axises, editor){
    	
      SB.counter++;
      SB.elements[SB.counter] = {
      	e: e,
        axises: axises,
        scrollbarmousedown: {
        	x: false,
          y: false
        },
        scrollbar: {
        	x: false,
          y: false
        },
        x: {
        	axis: 'x',
          size: 'width',
          clientSize: 'clientWidth',
          cssAxis: 'left',
          clientAxis: 'clientX',
          scroll: 'scrollLeft'
        },
        y: {
        	axis: 'y',
          size: 'height',
          clientSize: 'clientHeight',
          cssAxis: 'top',
          clientAxis: 'clientY',
          scroll: 'scrollTop'
        },
        loadScrollbar: function(axis){
          if(['x','y'].indexOf(axis) == -1) return;
          e.scrollbar[axis] = document.createElement('div');
          e.scrollbar[axis].className = 'sheepbar-scrollbar sheepbar-'+axis;
          e.scrollbar[axis].appendChild(document.createElement('div'));
          e.e.appendChild(e.scrollbar[axis]);

          e.scrollbar[axis].style[e[axis].size] = ((e.e[e[axis].clientSize]*((e.e[e[axis].clientSize]/e.content[e[axis].clientSize])*100))/100)+'px';

          e.scrollbar[axis].style.position = 'absolute';
          e.scrollbar[axis].style[e[axis].cssAxis] = 0;
          
          e.scrollbar[axis].addEventListener('mousedown', function(event){
            e.scrollbarmousedown[axis] = event[e[axis].clientAxis];
          });
        }
      };
      e = SB.elements[SB.counter];
    	
      e.e.style.position = SB.config.position;
      e.e.style.overflow = 'hidden';
      e.scrollbox = document.createElement('div');
     ...