Tutorial: Cambiar el aspecto del Scroll del Navegador

En este tutorial os explicaré cómo cambiar el aspecto del Scroll del Navegador.

Para uno de mis proyectos, en el cual el scroll por defecto del navegador me ensuciaba el diseño, tuve que buscar cómo hacer para cambiar su aspecto.

Pues bien, hoy lo comparto por si os pasa lo mismo, y lo necesitais para uno de vuestros proyectos.

Es muy fácil de implementar y tiene algunas opciones para activar o desactivar funciones.

DEMO
Página Oficial del Plugin dónde os lo podreis descargar

1. Enlazar jQuery

Lo primero, como casi siempre en este tipo de plugins, será añadir y enlazar los archivos JavaScript:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.mCustomScrollbar.concat.min.js"></script>

2. Archivos y modificación de las CSS

El segundo paso, será añadir el archivo css:

<link href="jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />

Teneis que saber, que las flechas de arriba y abajo del plugin, son imagenes, y como tales, hay que meterlas dentro de la carpeta del proyecto, yo por defecto las he metido en la raiz del mismo. Es importante modificar en este archivo CSS la ruta donde se encuentra dicha imagen, ya que, si la ruta no es correcta, es imposible que se visualicen las flechas.

3. El código HTML

En mi ejemplo, he añadido 4 cajas con texto, la «magia» la haremos posteriormente con las CSS y con el script jQuery, pero primero, nada de eso, sería posible sin añadir el código HTML:

<div class="contenedor">
     <div class="ejemplo1">texto</div>
     <div class="ejemplo2">texto</div>
     <div class="ejemplo3">texto</div>
     <div class="ejemplo4">texto</div>
</div>

IMPORTANTE: Recuerda meter mucho texto para que el div se desborde, de lo contrario no se verá el efecto

4. El código css

Aquí el truco está en darle a cada div un alto menor al que sabemos que ocupará el texto para así hacer que se desborde y aparezca la barra de Scroll:

contenedor{width:900px; margin:auto; margin-top:20px;padding-bottom: 50px; overflow:auto;}

.ejemplo1{float:left; height:300px; width:400px; background: #505050; padding:10px; color: #ddd; border-radius: 10px}

.ejemplo2{float:right; height:300px; width:400px;}

.ejemplo3{float:left; height:300px; width:400px; background: #EB3755; padding:10px; color: #ddd; border-radius: 10px; margin-top: 50px}

.ejemplo4{float:right; height:300px; width:400px; background: #26BEFF; padding:10px; color: #222; border-radius: 10px; margin-top: 50px}

La magia del jQuery

Por fin hemos llegado a la parte más importante: el código jQuery que hará que todo esto funcione:

<script>
    (function($){
        $(window).load(function(){
            $(".ejemplo1").mCustomScrollbar();
        });
    })(jQuery);

    (function($){
        $(window).load(function(){
            $(".ejemplo2").mCustomScrollbar({
        theme:"dark",
        scrollButtons:{
          enable:true
        }
      });
    });
  })(jQuery);


    (function($){
        $(window).load(function(){
            $(".ejemplo3").mCustomScrollbar({
        theme:"light-thick",
        scrollButtons:{
          enable:true
        }
      });
    });
  })(jQuery);


    (function($){
        $(window).load(function(){
            $(".ejemplo4").mCustomScrollbar({
        theme:"dark-thin",
        scrollButtons:{
          enable:true
        }
      });
    });
  })(jQuery);

</script>

En el primer ejemplo, sólamente llamamos a la función con sus opciones por defecto, en cambio en las demás le añadimos un tema (los diferentes temas los tenemos en su web oficial), y los botones de arriba y abajo.

Recuerda que, como casi siempre, estos plugins tienen más funciones y características para configurar. Puedes mirar la documentación e implementarlas.