NANOSCROLL

by Raúl Rojas

HTML

<div id="about" class="nano">
  <div class="content">
    <nav class="vertical">
      <ul>
        <li>
          <img class="logo" src="http://puestapunto.mx/assets/img/logo-puestapunto.png" />
          <p class="modulo">Módulo 1</p>
          <!--
<hr/>
-->
          <p class="mod-desc">
            Tú como fuente de Satisfacción del Cliente
          </p>

          <div>
            <ul>
              <li><a href="#">Introducción </a>
              </li>
              <li><a href="#"><span class="bold">Grupo GES</span> La Gran Empresa a la que perteneces, conócela, cuídala</a>
              </li>
              <li><a href="#">¿Soy mi versión más Productiva? ¿Contribuyo a hacer <span class="bold">Grupo GES</span>  una empresa más Competitiva?</a>
              </li>
              <li><a href="#">Personas Sirviendo a otras Personas, la base del Servicio</a>
              </li>
              <li><a href="#">Los Hábitos, sus virtudes y ventajas</a>
              </li>
              <li><a href="#">Los resultados, nuestra gran guía</a>
              </li>
              <li><a href="#">Tú; Factor de Cambio</a>
              </li>
              <li><a href="#">Clientes Felices, clientes Rentables </a>
              </li>
              <li><a href="#">Ser para Servir, el servicio comienza en casa, se refleja en <span class="bold">Grupo GES</span> </a>
              </li>
              <li><a href="#">Cierre </a>
              </li>
              <li><a href="#">Referencias Bibliográficas</a>
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </nav>
  </div>
</div>

CSS

/** initial setup **/

.nano {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.nano .content {
  position: absolute;
  overflow: scroll;
  overflow-x: hidden;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.nano .content:focus {
  outline: thin dotted;
}

.nano .content::-webkit-scrollbar {
  visibility: hidden;
}

.has-scrollbar .content::-webkit-scrollbar {
  visibility: visible;
}

.nano>.pane {
  background: rgba(0, 0, 0, .25);
  position: absolute;
  width: 10px;
  right: 0;
  top: 0;
  bottom: 0;
  visibility: hidden\9;
  /* Target only IE7 and IE8 with this hack */
  opacity: .01;
  -webkit-transition: .2s;
  -moz-transition: .2s;
  -o-transition: .2s;
  transition: .2s;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.nano>.pane>.slider {
  background: #444;
  background: rgba(0, 0, 0, .5);
  position: relative;
  margin: 0 1px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

.nano:hover>.pane,
.pane.active,
.pane.flashed {
  visibility: visible\9;
  /* Target only IE7 and IE8 with this hack */
  opacity: 0.99;
}

.nano {
  background: transparent;
  width: 280px;
  height: 600px;
  margin: 0 auto;
}

.nano .content {
  padding: 0px;
}

.nano .pane {
  background: red;
}

.nano .slider {
  background: #111;
}

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: sans-serif;
}

div.content {
  margin: 0px auto;
  border: 0px solid #019fe3;
  padding: 0px !important;
}

nav.vertical {
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .15);
  text-align: center;
  border-bottom: 9px solid #019fe3;
  background-color: #019fe3;
  margin: 0 auto;
}

nav.vertical>ul {
  list-style-type: none;
  line-height: 1.6;
  overflow: hidden;
}

nav.vertical>ul>li {
  display: block;
}

nav.vertical>ul>li {
  background-color: #019fe3;
  border-bottom: 0px solid rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 100px 10px rgba(16, 102, 139, 0.1);
  color:...

JavaScript

/*! nanoScrollerJS v0.7.2 (c) 2013 James Florentino; Licensed MIT */
(function(e, t, n) {
  "use strict";
  var r, i, s, o, u, a, f, l, c, h, p, d, v, m, g, y, b, w, E, S, x;
  S = {
    paneClass: "pane",
    sliderClass: "slider",
    contentClass: "content",
    iOSNativeScrolling: !1,
    preventPageScrolling: !1,
    disableResize: !1,
    alwaysVisible: !1,
    flashDelay: 1500,
    sliderMinHeight: 20,
    sliderMaxHeight: null,
    documentContext: null,
    windowContext: null
  }, y = "scrollbar", g = "scroll", l = "mousedown", c = "mousemove", p = "mousewheel", h = "mouseup", m = "resize", u = "drag", w = "up", v = "panedown", s = "DOMMouseScroll", o = "down", E = "wheel", a = "keydown", f = "keyup", b = "touchmove", r = t.navigator.appName === "Microsoft Internet Explorer" && /msie 7./i.test(t.navigator.appVersion) && t.ActiveXObject, i = null, x = function() {
    var e, t, r;
    return e = n.createElement("div"), t = e.style, t.position = "absolute", t.width = "100px", t.height = "100px", t.overflow = g, t.top = "-9999px", n.body.appendChild(e), r = e.offsetWidth - e.clientWidth, n.body.removeChild(e), r
  }, d = function() {
    function a(r, s) {
      this.el = r, this.options = s, i || (i = x()), this.$el = e(this.el), this.doc = e(this.options.documentContext || n), this.win = e(this.options.windowContext || t), this.$content = this.$el.children("." + s.contentClass), this.$content.attr("tabindex", 0), this.content = this.$content[0], this.options.iOSNativeScrolling && this.el.style.WebkitOverflowScrolling != null ? this.nativeScrolling() : this.generate(), this.createEvents(), this.addEvents(), this.reset()
    }
    return a.prototype.preventScrolling = function(e, t) {
      if (!this.isActive) return;
      if (e.type === s)(t === o && e.originalEvent.detail > 0 || t === w && e.originalEvent.detail < 0) && e.preventDefault();
      else if (e.type === p) {
        if (!e.originalEvent || !e.originalEvent.wheelDelta) return;
        (t ===...