requirebin sketch

index.js

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

new Gemini({
  element: document.querySelector('.scroller-a')
}).create();

minified.js

setTimeout(function(){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;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",resizeTrigger:"gm-resize-trigger"};function getScrollbarWidth(){var e=document.createElement("div"),sw;e.style.position="absolute";e.style.top="-9999px";e.style.width="100px";e.style.height="100px";e.style.overflow="scroll";e.style.msOverflowStyle="scrollbar";document.body.appendChild(e);sw=e.offsetWidth-e.clientWidth;document.body.removeChild(e);return sw}function addClass(el,classNames){if(el.classList){return classNames.forEach(function(cl){el.classList.add(cl)})}el.className+=" "+classNames.join(" ")}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 isIE(){var agent=navigator.userAgent.toLowerCase();return agent.indexOf("msie")!==-1||agent.indexOf("trident")!==-1||agent.indexOf(" edge/")!==-1}function GeminiScrollbar(config){this.element=null;this.autoshow=false;this.createElements=true;this.forceGemini=false;this.onResize=null;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._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]);if(this.onResize){if(this.createElements===true){this._viewElement=document.createElement("div");while(this.element.childNodes.length>0){this._viewElement.appendChild(this.element.childNodes[0])}this.element.appendChild(this._viewElement)}else{this._viewElement=this.element.querySelector("."+CLASSNAMES.view)}addClass(this.element,[CLASSNAMES.element]);addClass(this._viewElement,[CLASSNAMES.view]);this._createResizeTrigger()}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;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._createResizeTrigger();this._created=true;return this._bindEvents().update()};GeminiScrollbar.prototype._createResizeTrigger=function createResizeTrigger(){var obj=document.createElement("object");addClass(obj,[CLASSNAMES.resizeTrigger]);obj.type="text/html";var resizeHandler=this._resizeHandler.bind(this);obj.onload=function(){var win=obj.contentDocument.defaultView;win.addEventListener("resize",resizeHandler)};if(!isIE()){obj.data="about:blank"}this.element.appendChild(obj);if(isIE()){obj.data="about:blank"}this._resizeTriggerElement=obj};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._viewElement.style.height="";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(this._resizeTriggerElement){this.element.removeChild(this._resizeTriggerElement);this._resizeTriggerElement=null}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=null;return null};GeminiScrollbar.prototype.getViewElement=function getViewElement(){return this._viewElement};GeminiScrollbar.prototype._bindEvents=function _bindEvents(){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._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);return this};GeminiScrollbar.prototype._unbinEvents=function _unbinEvents(){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);return this};GeminiScrollbar.prototype._scrollHandler=function _scrollHandler(){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._resizeHandler=function _resizeHandler(){this.update();if(this.onResize){this.onResize()}};GeminiScrollbar.prototype._clickVerticalTrackHandler=function _clickVerticalTrackHandler(e){var offset=Math.abs(e.target.getBoundingClientRect().top-e.clientY),thumbHalf=this._thumbVerticalElement.offsetHeight/2,thumbPositionPercentage=(offset-thumbHalf)*100/this._scrollbarVerticalElement.offsetHeight;this._viewElement.scrollTop=thumbPositionPercentage*this._viewElement.scrollHeight/100};GeminiScrollbar.prototype._clickHorizontalTrackHandler=function _clickHorizontalTrackHandler(e){var offset=Math.abs(e.target.getBoundingClientRect().left-e.clientX),thumbHalf=this._thumbHorizontalElement.offsetWidth/2,thumbPositionPercentage=(offset-thumbHalf)*100/this._scrollbarHorizontalElement.offsetWidth;this._viewElement.scrollLeft=thumbPositionPercentage*this._viewElement.scrollWidth/100};GeminiScrollbar.prototype._clickVerticalThumbHandler=function _clickVerticalThumbHandler(e){this._startDrag(e);this._prevPageY=e.currentTarget.offsetHeight-(e.clientY-e.currentTarget.getBoundingClientRect().top)};GeminiScrollbar.prototype._clickHorizontalThumbHandler=function _clickHorizontalThumbHandler(e){this._startDrag(e);this._prevPageX=e.currentTarget.offsetWidth-(e.clientX-e.currentTarget.getBoundingClientRect().left)};GeminiScrollbar.prototype._startDrag=function _startDrag(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 _mouseUpDocumentHandler(){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 _mouseMoveDocumentHandler(e){if(this._cursorDown===false){return}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 Gemini=require("gemini-scrollbar");new Gemini({element:document.querySelector(".scroller-a")}).create()},0);

package.json

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

page-body.html

<style type="text/css">
  .scroller {overflow: auto; width: 300px; height: 300px; border: 1px solid gray}
  .container {padding: 0 20px}
  .abs {position: absolute; width: 200px; height: 100px; background: red}
</style>

<div style="display: inline-block">
  <h3>Native</h3>
  <div class="scroller">
    <div style='padding: 20px;'>
      <div class="abs"></div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>
</div>

<div style="display: inline-block">
  <h3>Gemini</h3>
  <div class="scroller scroller-a">
    <div style='padding: 20px;'>
      <div class="abs"></div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>
</div>

page-head.html

<style type="text/css">
/**
 * gemini-scrollbar
 * @version 1.4.2
 * @link http://noeldelgado.github.io/gemini-scrollbar/
 * @license MIT
 */

/* disable selection while dragging */
.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;
}

/* fallback for native floating scrollbars */
.gm-prevented {
  -webkit-overflow-scrolling: touch;
}
.gm-prevented .gm-scrollbar {
  display: none;
}

/* actual gemini-scrollbar styles */
.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;
}

/* @option: autoshow */
.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:active .gm-scrollbar,
.gm-scrollbar-container.gm-autoshow:focus .gm-scrollbar {
  opacity: 1;
  transition: opacity 340ms ease-out;
}

.gm-resize-trigger {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
}

</style>

requirebin.md

made with requirebin