Webkit (para el caso, los navegadores como Google Chrome y Safari) implementó hace tiempo algunos pseudoelementos para poder personalizar con CSS los scrollbars (las barras que usamos para desplazarnos a través del contenido de una página). Hay otras opciones via javascript, pero eso supone cargar la página con scripts que, de no ser algo especialmente necesario, no merece la pena.

Aquí vamos a usar ejemplos simples. Si se quiere profundizar en el tema recomiendo echar un vistazo a este artículo, donde se explican no solo los pseudoelementos, sino también las pseudoclases.

La explicación de lo que vamos a hacer

Para los ejemplos sólo vamos a necesitar 2 pseudoelementos:

::-webkit-scrollbar es toda la extensión de la barra.
-webkit-scrollbar-thumb es lo que podemos mover haciendo click o con la rueda del ratón. Es decir, lo que nos permite desplazarnos.

Los ejemplos

Aquí tenéis algunos ejemplos (simples) de lo que se puede hacer:

Nota:Fijaros en que el elemento no tiene por qué ser global (::-webkit-scrollbar), sino que los podéis aplicar a elementos individuales, clases… (.miClase::-webkit-scrollbar).
Un ejemplo: si quisiérais personalizar todas las scrollbars menos la principal (la de html), el pseudoelemento sería body::-webkit-scrollbar
También es muy importante que el elemento tenga overflow, que no tiene por qué ser especificado directamente en el css, pero lo podemos hacer con overflow:scroll

Hoy vamos a hacer algo distinto: os dejo jugar aquí mismo con el CSS . Los párrafos están abajo, en orden de arriba a abajo (demo1,demo2,demo3). Notad que si navegáis con Firefox, Opera, IE, etc veréis las barras predeterminadas de vuestro sistema operativo

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Expetenda tincidunt in sed, ex partem placerat sea, porro commodo ex eam. His putant aeterno interesset at. Usu ea mundi tincidunt, omnium virtute aliquando ius ex. Ea aperiri sententiae duo. Usu nullam dolorum quaestio ei, sit vidit facilisis ea. Per ne impedit iracundia neglegentur. Consetetur neglegentur eum ut, vis animal legimus inimicus id. His audiam deserunt in, eum ubique voluptatibus te. In reque dicta usu. Ne rebum dissentiet eam, vim omnis deseruisse id. Ullum deleniti vituperata at quo, insolens complectitur te eos, ea pri dico munere propriae. Vel ferri facilis ut, qui paulo ridens praesent ad. Possim alterum qui cu. Accusamus consulatu ius te, cu decore soleat appareat usu.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Expetenda tincidunt in sed, ex partem placerat sea, porro commodo ex eam. His putant aeterno interesset at. Usu ea mundi tincidunt, omnium virtute aliquando ius ex. Ea aperiri sententiae duo. Usu nullam dolorum quaestio ei, sit vidit facilisis ea. Per ne impedit iracundia neglegentur. Consetetur neglegentur eum ut, vis animal legimus inimicus id. His audiam deserunt in, eum ubique voluptatibus te. In reque dicta usu. Ne rebum dissentiet eam, vim omnis deseruisse id. Ullum deleniti vituperata at quo, insolens complectitur te eos, ea pri dico munere propriae. Vel ferri facilis ut, qui paulo ridens praesent ad. Possim alterum qui cu. Accusamus consulatu ius te, cu decore soleat appareat usu.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Expetenda tincidunt in sed, ex partem placerat sea, porro commodo ex eam. His putant aeterno interesset at. Usu ea mundi tincidunt, omnium virtute aliquando ius ex.
Ea aperiri sententiae duo. Usu nullam dolorum quaestio ei, sit vidit facilisis ea. Per ne impedit iracundia neglegentur. Consetetur neglegentur eum ut, vis animal legimus inimicus id.
His audiam deserunt in, eum ubique voluptatibus te. In reque dicta usu. Ne rebum dissentiet eam, vim omnis deseruisse id. Ullum deleniti vituperata at quo, insolens complectitur te eos, ea pri dico munere propriae. Vel ferri facilis ut, qui paulo ridens praesent ad. Possim alterum qui cu. Accusamus consulatu ius te, cu decore soleat appareat usu.

Mira aquí →

10 pensamientos en “Scrollbars personalizadas en WebKit

  1. Imagen de Andres GalarzaAndres Galarza el dijo:

    Oye, quisiera saber, esto se puede hacer pero con firefox?, porque yo utilizo firefox mas que google chrome, así que me gustaria ver esto mismo en firefox, bien, eso es todo, muchas gracias!!

    • Imagen de Emilio Cobos Álvarez el dijo:

      Hay soluciones para todos los navegadores, pero consisten en javascript, luego cargan más la página…
      Si de todos modos estás interesado, te recomiendo el plugin para jQuery jScrollPane.
      Sólo tienes que poner en un script: "$('el selector que quieras').jScrollPane()"

      Eso creará una scrollbar hecha de otros divs, que puedes estilizar con CSS. Si tienes problemas con el CSS, pásate por aquí y estaré encantado de ayudarte.

    • Imagen de Andres Galarza el dijo:

      wow, fijate que vi la pagina que me recomiendas, pero wow no entiendo nada de nada, realmente es dificil para mi esto del html y esas cosas, pero gracias a ti por ayudarme!, yo solo tengo una duda, con puro css así como muestras aquí en el tutorial, no se puede hacer así pero para firefow?, pues yo sé que "webkit" es para navegadores como Google Chrome, mas no para firefox, por lo cual para firefox es "moz", eso es lo que yo entiendo, no se si tu me entiendas, pero te agradezco mucho, eres muy amable, desde Bogota D.C. en Colombia, gracias!

    • Imagen de Emilio Cobos Álvarez el dijo:

      Depende de a qué quieras aplicarlo. Si quieres que afecte a todas las de la página pon
      ::-webkit-scrollbar{
      height:11px;
      width:11px;
      background:white;
      -webkit-box-shadow:inset 0 0 3px rgba(0,0,0,.3);
      -webkit-border-radius: 10px;
      }
      ::-webkit-scrollbar-thumb{
      background:#ccc;
      -webkit-border-radius:10px;
      border:1px solid #aaa;
      }

      Si quieres que afecte a determinados elementos, tendrías que poner antes de los "::" el selector al que quieres que afecte.

      Como todo el CSS va encima de </b:skin>

Responder a keyvin2012 Cancelar respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Puedes usar las siguientes etiquetas y atributos HTML:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre data-language=""> <ul> <ol> <li>
Para poner código usa <pre data-language="[lenguaje]"><code>[código]</code></pre>, y no olvides escapar el HTMl.