Coder Wrap provides free to use snippets

body {
 margin: 0px;
 background-color: #f8fff8;
 font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.main-group {
 margin: auto;
 max-width: 400px;
 width: 100%;
}

.custom-scroll {
 position: relative;
 width: 400px;
 height: 300px;
 border: 1px #ccc solid;
 padding: 0px 0px 0px 10px;
}

.custom-scroll:after {
 content: '';
 position: absolute;
 right: 0px;
 top: 0px;
 height: 100%;
 width: 4px;
 background-color: #ccc;
}

*.morulus-customsb {
 position: relative;
 width: 100%;
 height: 100%;
 overflow: hidden;
}

*.morulus-customsb > figure:first-child {
 margin: 0px !important;
 position: absolute;
 right: 0px !important;
 width: 4px !important;
 height: 100px;
 background-color: #000;
 z-index: 2;
}

*.morulus-customsb > *:last-child {
 overflow-y: scroll;
 height: 100%;
 width: 100%;
 padding-right: 20px;
}

window.morulusCustomSb = (function() {
	var nu=navigator.userAgent,
  aus=['Mozilla','IE'],
  removeEventListner = function(el, type, handler) {
		if ( el.addEventListener ) {
      el.removeEventListener(type, handler, false);
    }  else if ( elem.attachEvent ) {
      el.detachEvent("on" + type, handler);
    } else {
      el["on"+type] = null;
    };
  },
 	eventListner = function(el, type, handler, once) {
    	var realhandler = once ? function() {
        removeEventListner(el, type, realhandler);
			} : handler;
      if ( el.addEventListener ) {
        listen = el.addEventListener( type, handler, false );
      } else if (el.attachEvent) {
         listen = el.addEventListener( 'on'+type, handler, false );
      } else {
        el['on'+type] = handler;
      }
      return el;
  },
  retfalse = function() { return !!0; },
  disableSelection = function(el) {
    	if (nu.indexOf(aus[0]) != -1)
      el.style['MozUserSelect']='none';
    	else if (nu.indexOf(aus[1]) != -1)
      eventListner(el, 'selectstart.disableTextSelect', retfalse);
    	else 
      eventListner(el, 'mousedown.disableTextSelect', retfalse);
	},
  enableSelection = function(el) {
   		if (nu.indexOf(aus[0]) != -1)
      el.style['MozUserSelect']='';
    	else if (nu.indexOf(aus[1]) != -1)
      removeEventListner(el, 'selectstart.disableTextSelect', retfalse);
    	else 
      removeEventListner(el, 'mousedown.disableTextSelect', retfalse);
  }
  return function(a) {

    var 
    listen,
    i,
    d=document,
    s,
    n,
    r,
    height,
    scrollTop,
    handlerScroll = function(e) {
      r.style.top = ( (100 - parseInt(r.style.height)) * (s.scrollTop/(s.scrollHeight-s.clientHeight)) )+'%';
    },
    drag = !!0,
    screenY = 0,
    handlerMove = function(e) {
    	var d = ((height*(scrollTop/(s.scrollHeight-s.clientHeight)))+(e.screenY-screenY));
      if (d>height) d = height;
      else if (d<0) d = 0;
      s.scrollTop = Math.round((s.scrollHeight-s.clientHeight)*(d/height));
		},
    handlerUp = function(e) {
      drag=!!0;
      enableSelection(s);
      	removeEventListner(window, 'mousemove', handlerMove);
      e.stopPropagation();
		},
    handlerDown = function(e) {
      drag=!0;screenY=e.screenY; 
      height=s.clientHeight-parseInt(window.getComputedStyle(r).height);
      scrollTop=s.scrollTop;
      disableSelection(s);
      eventListner(window, 'mousemove', handlerMove);
      eventListner(window, 'mouseup', handlerUp, true);
      e.preventDefault();
      return false;
		},
    handlerWrapDown = function(e) {
     if(e.offsetX>n.offsetWidth-20){
        s.scrollTop = Math.round((s.scrollHeight-s.clientHeight)*(e.offsetY/n.offsetHeight));
        handlerDown(e);
      }
    },
    n=d.createElement('div');
    r=d.createElement('figure');
    s=d.createElement('div');
    for (i=0;i {
  morulusCustomSb(element);
});