requirebin sketch

index.js

// require() some stuff from npm (like you were using browserify)
// and then hit Run Code to run it on the right


var GeminiScrollbar = require('gemini-scrollbar');

var myScrollbar = new GeminiScrollbar({
    element: document.querySelector('.scroller1')
}).create();

var scrollbar2 = new GeminiScrollbar({
  element: document.querySelector('.scroller2')
}).create();

console.log(document.querySelector('.scroller1'));
console.log(document.querySelector('.scroller2'));

minified.js

require=function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({"gemini-scrollbar":[function(require,module,exports){(function(){var SCROLLBAR_WIDTH,DONT_CREATE_GEMINI,CLASSNAMES,addClass,removeClass,getScrollbarWidth;CLASSNAMES={element:"gm-scrollbar-container",verticalScrollbar:"gm-scrollbar -vertical",horizontalScrollbar:"gm-scrollbar -horizontal",thumb:"thumb",view:"gm-scroll-view",autoshow:"gm-autoshow",disable:"gm-scrollbar-disable-selection",prevented:"gm-prevented",scrollbarWidthTest:"gm-test"};getScrollbarWidth=function getScrollbarWidth(){var scrollDiv=document.createElement("div");scrollDiv.className=CLASSNAMES.scrollbarWidthTest;document.body.appendChild(scrollDiv);var scrollbarWidth=scrollDiv.offsetWidth-scrollDiv.clientWidth;document.body.removeChild(scrollDiv);return scrollbarWidth};addClass=function addClass(el,classNames){if(el.classList){return classNames.forEach(function(cl){el.classList.add(cl)})}el.className+=" "+classNames.join(" ")};removeClass=function removeClass(el,classNames){if(el.classList){return classNames.forEach(function(cl){el.classList.remove(cl)})}el.className=el.className.replace(new RegExp("(^|\\b)"+classNames.join("|")+"(\\b|$)","gi")," ")};function GeminiScrollbar(config){this.element=null;this.autoshow=false;this.createElements=true;this.forceGemini=false;Object.keys(config||{}).forEach(function(propertyName){this[propertyName]=config[propertyName]},this);SCROLLBAR_WIDTH=getScrollbarWidth();DONT_CREATE_GEMINI=SCROLLBAR_WIDTH===0&&this.forceGemini===false;this._cache={events:{}};this._created=false;this._cursorDown=false;this._prevPageX=0;this._prevPageY=0;this._document=null;this._window=null;this._viewElement=this.element;this._scrollbarVerticalElement=null;this._thumbVerticalElement=null;this._scrollbarHorizontalElement=null;this._scrollbarHorizontalElement=null}GeminiScrollbar.prototype.create=function create(){if(DONT_CREATE_GEMINI){addClass(this.element,[CLASSNAMES.prevented]);return this}if(this._created===true){console.warn("calling on a already-created object");return this}if(this.autoshow){addClass(this.element,[CLASSNAMES.autoshow])}this._document=document;this._window=window;if(this.createElements===true){this._viewElement=document.createElement("div");this._scrollbarVerticalElement=document.createElement("div");this._thumbVerticalElement=document.createElement("div");this._scrollbarHorizontalElement=document.createElement("div");this._thumbHorizontalElement=document.createElement("div");while(this.element.childNodes.length>0){this._viewElement.appendChild(this.element.childNodes[0])}this._scrollbarVerticalElement.appendChild(this._thumbVerticalElement);this._scrollbarHorizontalElement.appendChild(this._thumbHorizontalElement);this.element.appendChild(this._scrollbarVerticalElement);this.element.appendChild(this._scrollbarHorizontalElement);this.element.appendChild(this._viewElement)}else{this._viewElement=this.element.querySelector("."+CLASSNAMES.view);this._scrollbarVerticalElement=this.element.querySelector("."+CLASSNAMES.verticalScrollbar.split(" ").join("."));this._thumbVerticalElement=this._scrollbarVerticalElement.querySelector("."+CLASSNAMES.thumb);this._scrollbarHorizontalElement=this.element.querySelector("."+CLASSNAMES.horizontalScrollbar.split(" ").join("."));this._thumbHorizontalElement=this._scrollbarHorizontalElement.querySelector("."+CLASSNAMES.thumb)}addClass(this.element,[CLASSNAMES.element]);addClass(this._viewElement,[CLASSNAMES.view]);addClass(this._scrollbarVerticalElement,CLASSNAMES.verticalScrollbar.split(/\s/));addClass(this._scrollbarHorizontalElement,CLASSNAMES.horizontalScrollbar.split(/\s/));addClass(this._thumbVerticalElement,[CLASSNAMES.thumb]);addClass(this._thumbHorizontalElement,[CLASSNAMES.thumb]);this._scrollbarVerticalElement.style.display="";this._scrollbarHorizontalElement.style.display="";this._created=true;return this._bindEvents().update()};GeminiScrollbar.prototype.update=function update(){if(DONT_CREATE_GEMINI){return this}if(this._created===false){console.warn("calling on a not-yet-created object");return this}var heightPercentage,widthPercentage;this._viewElement.style.width=(this.element.offsetWidth+SCROLLBAR_WIDTH).toString()+"px";this._viewElement.style.height=(this.element.offsetHeight+SCROLLBAR_WIDTH).toString()+"px";heightPercentage=this._viewElement.clientHeight*100/this._viewElement.scrollHeight;widthPercentage=this._viewElement.clientWidth*100/this._viewElement.scrollWidth;this._thumbVerticalElement.style.height=heightPercentage<100?heightPercentage+"%":"";this._thumbHorizontalElement.style.width=widthPercentage<100?widthPercentage+"%":"";this._scrollHandler();return this};GeminiScrollbar.prototype.destroy=function destroy(){if(DONT_CREATE_GEMINI){return this}if(this._created===false){console.warn("calling on a not-yet-created object");return this}this._unbinEvents();removeClass(this.element,[CLASSNAMES.element,CLASSNAMES.autoshow]);if(this.createElements===true){this.element.removeChild(this._scrollbarVerticalElement);this.element.removeChild(this._scrollbarHorizontalElement);while(this._viewElement.childNodes.length>0){this.element.appendChild(this._viewElement.childNodes[0])}this.element.removeChild(this._viewElement)}else{this._viewElement.style.width="";this._viewElement.style.height="";this._scrollbarVerticalElement.style.display="none";this._scrollbarHorizontalElement.style.display="none"}this._created=false;this._document=this._window=null;return null};GeminiScrollbar.prototype.getViewElement=function(){return this._viewElement};GeminiScrollbar.prototype._bindEvents=function(){this._cache.events.scrollHandler=this._scrollHandler.bind(this);this._cache.events.clickVerticalTrackHandler=this._clickVerticalTrackHandler.bind(this);this._cache.events.clickHorizontalTrackHandler=this._clickHorizontalTrackHandler.bind(this);this._cache.events.clickVerticalThumbHandler=this._clickVerticalThumbHandler.bind(this);this._cache.events.clickHorizontalThumbHandler=this._clickHorizontalThumbHandler.bind(this);this._cache.events.mouseUpDocumentHandler=this._mouseUpDocumentHandler.bind(this);this._cache.events.mouseMoveDocumentHandler=this._mouseMoveDocumentHandler.bind(this);this._cache.events.resizeWindowHandler=this.update.bind(this);this._viewElement.addEventListener("scroll",this._cache.events.scrollHandler);this._scrollbarVerticalElement.addEventListener("mousedown",this._cache.events.clickVerticalTrackHandler);this._scrollbarHorizontalElement.addEventListener("mousedown",this._cache.events.clickHorizontalTrackHandler);this._thumbVerticalElement.addEventListener("mousedown",this._cache.events.clickVerticalThumbHandler);this._thumbHorizontalElement.addEventListener("mousedown",this._cache.events.clickHorizontalThumbHandler);this._document.addEventListener("mouseup",this._cache.events.mouseUpDocumentHandler);this._window.addEventListener("resize",this._cache.events.resizeWindowHandler);return this};GeminiScrollbar.prototype._unbinEvents=function(){this._viewElement.removeEventListener("scroll",this._cache.events.scrollHandler);this._scrollbarVerticalElement.removeEventListener("mousedown",this._cache.events.clickVerticalTrackHandler);this._scrollbarHorizontalElement.removeEventListener("mousedown",this._cache.events.clickHorizontalTrackHandler);this._thumbVerticalElement.removeEventListener("mousedown",this._cache.events.clickVerticalThumbHandler);this._thumbHorizontalElement.removeEventListener("mousedown",this._cache.events.clickHorizontalThumbHandler);this._document.removeEventListener("mouseup",this._cache.events.mouseUpDocumentHandler);this._document.removeEventListener("mousemove",this._cache.events.mouseMoveDocumentHandler);this._window.removeEventListener("resize",this._cache.events.resizeWindowHandler);return this};GeminiScrollbar.prototype._scrollHandler=function(){var viewElement,x,y;viewElement=this._viewElement;y=viewElement.scrollTop*100/viewElement.clientHeight;x=viewElement.scrollLeft*100/viewElement.clientWidth;this._thumbVerticalElement.style.msTransform="translateY("+y+"%)";this._thumbVerticalElement.style.webkitTransform="translateY("+y+"%)";this._thumbVerticalElement.style.transform="translateY("+y+"%)";this._thumbHorizontalElement.style.msTransform="translateX("+x+"%)";this._thumbHorizontalElement.style.webkitTransform="translateX("+x+"%)";this._thumbHorizontalElement.style.transform="translateX("+x+"%)"};GeminiScrollbar.prototype._clickVerticalTrackHandler=function(e){var offset=Math.abs(e.target.getBoundingClientRect().top-e.clientY);var thumbHalf=this._thumbVerticalElement.offsetHeight/2;var thumbPositionPercentage=(offset-thumbHalf)*100/this._scrollbarVerticalElement.offsetHeight;this._viewElement.scrollTop=thumbPositionPercentage*this._viewElement.scrollHeight/100};GeminiScrollbar.prototype._clickHorizontalTrackHandler=function(e){var offset=Math.abs(e.target.getBoundingClientRect().left-e.clientX);var thumbHalf=this._thumbHorizontalElement.offsetWidth/2;var thumbPositionPercentage=(offset-thumbHalf)*100/this._scrollbarHorizontalElement.offsetWidth;this._viewElement.scrollLeft=thumbPositionPercentage*this._viewElement.scrollWidth/100};GeminiScrollbar.prototype._clickVerticalThumbHandler=function(e){this._startDrag(e);this._prevPageY=e.currentTarget.offsetHeight-(e.clientY-e.currentTarget.getBoundingClientRect().top)};GeminiScrollbar.prototype._clickHorizontalThumbHandler=function(e){this._startDrag(e);this._prevPageX=e.currentTarget.offsetWidth-(e.clientX-e.currentTarget.getBoundingClientRect().left)};GeminiScrollbar.prototype._startDrag=function(e){e.stopImmediatePropagation();this._cursorDown=true;addClass(document.body,[CLASSNAMES.disable]);this._document.addEventListener("mousemove",this._cache.events.mouseMoveDocumentHandler);this._document.onselectstart=function(){return false}};GeminiScrollbar.prototype._mouseUpDocumentHandler=function(){this._cursorDown=false;this._prevPageX=this._prevPageY=0;removeClass(document.body,[CLASSNAMES.disable]);this._document.removeEventListener("mousemove",this._cache.events.mouseMoveDocumentHandler);this._document.onselectstart=null};GeminiScrollbar.prototype._mouseMoveDocumentHandler=function(e){if(this._cursorDown===false){return void 0}var offset,thumbClickPosition,thumbPositionPercentage;if(this._prevPageY){offset=(this._scrollbarVerticalElement.getBoundingClientRect().top-e.clientY)*-1;thumbClickPosition=this._thumbVerticalElement.offsetHeight-this._prevPageY;thumbPositionPercentage=(offset-thumbClickPosition)*100/this._scrollbarVerticalElement.offsetHeight;this._viewElement.scrollTop=thumbPositionPercentage*this._viewElement.scrollHeight/100;return void 0}if(this._prevPageX){offset=(this._scrollbarHorizontalElement.getBoundingClientRect().left-e.clientX)*-1;thumbClickPosition=this._thumbHorizontalElement.offsetWidth-this._prevPageX;thumbPositionPercentage=(offset-thumbClickPosition)*100/this._scrollbarHorizontalElement.offsetWidth;this._viewElement.scrollLeft=thumbPositionPercentage*this._viewElement.scrollWidth/100}};if(typeof exports==="object"){module.exports=GeminiScrollbar}else{window.GeminiScrollbar=GeminiScrollbar}})()},{}]},{},[]);var GeminiScrollbar=require("gemini-scrollbar");var myScrollbar=new GeminiScrollbar({element:document.querySelector(".scroller1")}).create();var scrollbar2=new GeminiScrollbar({element:document.querySelector(".scroller2")}).create();console.log(document.querySelector(".scroller1"));console.log(document.querySelector(".scroller2"));

package.json

{
  "name": "requirebin-sketch",
  "version": "1.0.0",
  "dependencies": {
    "gemini-scrollbar": "1.3.0"
  }
}

page-body.html

<!-- contents of this file will be placed inside the <body> -->

<div class="container">
  normal left-to-right container
  <div class="scroller scroller1">
    <div class="inner-div">
      some long text. some long text. some long text. 
    </div>
  </div>
</div>


<div class="container container-rtl">
  right-to-left container
  <div class="scroller scroller2">
    <div class="inner-div">
          some long text. some long text. some long text. 
     </div>
  </div>
</div>

page-head.html

<!-- contents of this file will be placed inside the <head> -->

<style type="text/css">
  
  /**
 * gemini-scrollbar
 * @version 1.3.0
 * @link http://noeldelgado.github.io/gemini-scrollbar/
 * @license MIT
 */
.gm-test{width:100px;height:100px;position:absolute;top:-9999px;overflow:scroll;-ms-overflow-style:scrollbar}.gm-scrollbar-disable-selection{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.gm-prevented{-webkit-overflow-scrolling:touch}.gm-prevented .gm-scrollbar{display:none}.gm-scrollbar-container{position:relative;overflow:hidden!important;width:100%;height:100%}.gm-scrollbar{position:absolute;right:2px;bottom:2px;z-index:1;border-radius:3px}.gm-scrollbar.-vertical{width:6px;top:2px}.gm-scrollbar.-horizontal{height:6px;left:2px}.gm-scrollbar .thumb{position:relative;display:block;width:0;height:0;cursor:pointer;border-radius:inherit;background-color:rgba(0,0,0,.2)}.gm-scrollbar .thumb:hover,.gm-scrollbar .thumb:active{background-color:rgba(0,0,0,.3)}.gm-scrollbar.-vertical .thumb{width:100%}.gm-scrollbar.-horizontal .thumb{height:100%}.gm-scrollbar-container .gm-scroll-view{width:100%;height:100%;overflow:scroll;-webkit-overflow-scrolling:touch}.gm-scrollbar-container.gm-autoshow .gm-scrollbar{opacity:0;transition:opacity 120ms ease-out}.gm-scrollbar-container.gm-autoshow:hover .gm-scrollbar,.gm-scrollbar-container.gm-autoshow:focus .gm-scrollbar{opacity:1;transition:opacity 340ms ease-out}


  .container {
  width:200px; margin-bottom: 10px; margin-bottom:10px;
}

.container-rtl {
  direction: rtl; float:right
}

.scroller {
  position: relaive;
  height: 100px;
  border: solid 1px gray;
  overflow: hidden
}
.inner-div {width:1000px; height:300px; margin:10px 0; background:#f4f4f4; height:80px}
</style>

requirebin.md

made with requirebin