Cambiar el look del scroll: cómo configurar NiceScroll

Una de las mejoras de diseño que tarde o temprano queremos aplicar es un cambio de look al scroll. Para hacerlo bien no hay más, de momento, que aplicar javascript, y el mejor plugin que hay, o uno de los mejores, es el plugin de jQuery NiceScroll.

Para quien está habituado a trabajar con jQuery este pliugin es muy fácil, pero para los diseñadores que no necesariamente conocen jQuery o han trabajado nunca con él, puede resultar confuso. Estos puntos tratan de aclarar esa confusión, sin entrar en teoría:

1) Id a la página de descarga del plugin de NiceScroll.

2) Buscad la última versión

Imagen de la última versión funcional de la página de descarga de NiceScroll

Última versión funcional

Aseguraos de que no os bajáis la versión beta (en el momento del tutorial la útlima versión funcional es la 3.4 y la beta es la 3.5).

3) En el fichero hay muchos archivos, archivos de ejemplo, etc. A nosotros sólo nos interesa: jquery.nicescroll.js.

4) Una vez hemos bajado el plugin, tenemos que incluirlo en la página junto con el jQuery. Para ello en <head> ponemos primero el link al jQuery y después el link a nuestro archivo jquery.nicescroll.js:

<head>
    ...
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.0.0.min.js"></script>
    <script src="jquery.nicescroll.js"></script>
</head>

Es importante poner primero el link a jQuery, sino no funcionaría el plugin.

5) En la página de NiceScroll, abajo, tenéis los ejemplos para empezar. Nos fijamos en el primero, que sirve para cambiar el scroll de toda la página, que es lo que en principio buscamos. Para ello, copiamos este código y lo ponemos al final, justo antes de cerrar el </body>:

<script type="text/javascript">
   $(document).ready(
      function() { 
         $("html").niceScroll();
      }
   );
</script>

Este código aplica nuestro plugin al html, es decir, a todo el contenedor de nuestro html.

6) Recordad que para probarlo tenéis que tener suficiente contenido como para que se muestre el scroll, de manera que no va mal un poco de Lorem ipsum.

!Y ya está! Os dejo el código completo y funcional (recordad poner el archivo jquery.nicescroll.js en el mismo directorio que el .html del ejemplo para que éste funcione):