Modificación del scroll HTML


En determinadas ocasiones nos veremos en la necesidad de modificar estéticamente el scroll que por defecto nos presentan los navegadores cuando incluimos uno en nuestro código HTML/CSS. Existen diversas maneras de hacer esto y muchos scripts para ello, pero personalmente, tras probar varios he dado con uno que me parece muy versátil y fácil de utilizar y quería compartirlo con vosotros. Se trata de ypSimpleScroll


Aquí tenéis el código fuente original: http://www.youngpup.net/projects/ypSimpleScroll/

Pero he de decir que existe una modificación de este script de Aaron Boodman que para mi gusto lo mejora aún más y lo hace compatible con todos los navegadores (que yo haya testeado) y con mac. En el siguiente blog está el script modificado así como una detallada explicación de su uso: http://meddle.dzygn.com/esp/weblog/modificacion.scroller/

Básicamente. Tras descargar los archivos de la web de Boodman:
http://meddle.dzygn.com/v3/js/_aaron_scroller_mtv.rar

  1. Enlazas a los estilos css (totalmente personalizables).
    <link rel=”stylesheet” type=”text/css” href=”scroller.css”>
  2. Enlazas a los 3 archivos Javascript que hay que descargar.
    <script type=”text/javascript” src=”dom-drag.js”></script>
    <script type=”text/javascript” src=”ypSimpleScrollC.js”></script>
    <script type=”text/javascript” src=”scroller.js”></script>
  3. Inicias el script con la llamada a la función JS.
    <script type="text/javascript">
    instantiateScroller(0, "scroll0", 7, 0, 300, 150, 150);
    </script>

Muy útil, de verdad.

Si conocéis algún otro no dudéis en postearlo.