SummArg | Cursos y recursos para webmasters

17/02/2012

Colección de scripts para modificar la apariencia de la scrollbar

Las barras de scroll son un elemento todavía muy utilizado para navegar en un sitio web, ya que nos permiten visualizar contenido que escapa del área visible de un contenedor (o de una ventana) tanto de forma horizontal como vertical. El estilo visual de las mismas está definida por el navegador y aún hoy en día sigue siendo un poco complicado modificarlo, por eso pensamos en confeccionar y compartir esta colección de recursos orientado a personalizar las scrollbars.

1.Personalizar los colores de la scrollbar vía CSS (sólo para Internet Explorer)

Microsoft creó varias propiedades CSS para modificar el color, y sólo el color, de las scrollbars de su navegador. El código es el siguiente y cada propiedad (que es bastante explicativa por si misma) modifica el color de una sección diferente de la barra (como pueden ver en la imagen). Un código de ejemplo:

<style type=”text/css”>
body {
scrollbar-arrow-color: white;
scrollbar-base-color: white;
scrollbar-dark-shadow-color: #000080;
scrollbar-track-color: #0080C0;
scrollbar-face-color: #000080;
scrollbar-shadow-color: white;
scrollbar-highlight-color: white;
scrollbar-3d-light-color: a;
}
</style>

Fuente cssblog.es

2.Modificar el aspecto de la scrollbar vía CSS para navegadores webkit

Chrome y Safari son dos de los navegadores mas populares que utilizan el motor webkit y nos permiten modificar mayor cantidad de valores de las barras de desplazamiento vía CSS.

Los siguiente pseudo-elementos pueden utilizarse:
-webkit-scrollbar
-webkit-scrollbar-button
-webkit-scrollbar-track
-webkit-scrollbar-track-piece
-webkit-scrollbar-thumb
-webkit-scrollbar-corner
-webkit-resizer

Y las siguientes pseudo-clases se pueden aplicar sobre las anteriores:

:horizontal – Se aplica a cualquier parte de la barra de desplazamiento que tenga dirección horizontal.

:vertical – Se aplica a cualquier parte de la barra de desplazamiento que tenga dirección vertical.

:decrement – Se aplica a los botones y las partes del trayecto. Esto indica si el botón o parte del trayecto decrecerá la posición cuando se utiliza (Ejemplo: Arriba en una barra vertical, izquierda u horizontal).

:increment – Se aplica a los botones y a las partes del trayecto. Esto indica si un butón o parte del trayecto incrementará la posición cuando se utilize (Ejemplo: Abajo de una barra vertical, derecha u horizontal).

:start – Se aplica a los botones y a las partes del trayecto. Esto indica si el objeto se ubicará antes del thumb.

:end – Se aplica a los botones y a las partes del trayecto. Esto indica si el objeto se ubicará después del thumb.

:double-button – Se aplica a los botones y a las partes del trayecto. Se usa para detectar si el botón es parte de un par de botones que se encuentren en el mismo extremo de la barra de desplazamiento. Para las partes del trayecto indica si esta bordea el par de botones.

:single-button – Se aplica a los botones y a las partes del trayecto. Se utiliza para detectar si un botón está por si mismo en el final de la barra de desplazamiento.

:no-button – Se aplica a las partes del trayecto y indica si independientemente si la parte del trayecto se ejecuta al borde de la barra, es decir, no hay botón en ese extremo de la pista.

:corner-present – Se aplica a todas las partes de la barra de desplazamiento e indica si la esquina de redimensionamiento está presente.

:window-inactive – Se aplica a todas las partes de la barra e indica si independientemente o no la ventana que contiene la barra está activa. (Ahora esta pseudo-clase se aplica a ::selection también).
Demo | webkit | Visto en cssblog.es

3.Control.Scrollbar para Prototype

Plugin para prototype que nos permite tener la posibilidad de modificar la apariencia visual de las scrollbars.

control.Scrollbar

4.FlexScroll, asigna estilos a la scrollbar muy facil

fleXscroll no necesita de otras librerías para funcionar, es soportado por todos los navegadores e incluso por iPhone touch, e incorpora el movimiento de las barras por teclado y mouse. Muy completo y fácil de aplicar.

fleXscroll | Documentación

tinyScrollbar, plugin ultraliviano para jQuery

Tiene soporte para iPhone, iPad y Android, es muy liviano y bastante fácil de implementar. Admite varios parámetros para modificar el tamaño, la orientación y la posibilidad de soportar anchors.

jQuery tinyScrollbar

5.jQuery Custom Content Scroller

Este plugin soporta el uso de la rueda del mouse y funciona con jQuery UI y jQuery Easing. Es muy elegante y admite cargar contenidos vía ajax, adaptándose automáticamente a la nueva longitud del contenedor.

Descarga | Demo

6.Vertical Scrollbar

Este script permite aplicar una barra de navegación vertical utilizando jQuery UI y un poco de código javascript extra.

Descargar

7.jQuery Tools

jQuery Tools es un set de herramientas básicas que pueden descargarse todas juntas o seleccionando exclusivamente las que vamos a utilizar. Existen dos herramientas que pueden ser de utilidad a la hora de poseer contenido scrolleable: Rangeinput y Scrollable

8.jQuery Scrollbar Paper

Demo | Descarga

9.jQuery Scrollbars

Demo | Descarga

10.Shortscroll, estilo Google Wave

Demo | Descarga

11.LionBars

Emula el estilo de OSX, solicita pagar la descarga con un tweet. Muy fácil de usar.

Descarga y Demo

12.jScrollPane

Admite una gran cantidad de parámetros para su personalización.

web del script

13.Scroll Vertical

Descargar | Demo

14.Scrollable div

Descargar | Demo

15.Custom Scrollbars

Descargar

16.VenScrollBar, premium plugin

Descargar

17.Mootools styled scrollbar

Descargar

Comentarios cerrados