scrollbar-webkit-css

Antes solo podíamos personalizar las barras de desplazamiento (scrollbar) en Internet Explorer (véase esta entrada), pero ahora ya podemos hacerlo también en todos los navegadores que soporten WebKit (Safari, Google Chrome), ya que Webkit ahora soporta la personalización de scrollbars en textareas, listboxes, dropdown menus, y secciones overflow.

Si deseáis ver el ejemplo directamente para ver su código podéis verlo aquí:

Ver ejemplo de la personalización de barras de desplazamiento.

Os mostramos un pantallazo para los que no tengan navegador que soporte Webkit y puedan ver el efecto:

scrollbar-webkit-personalizacion

El pseudo-elemento scrollbar indica que un objeto use una barra de scroll personalizada. Cuando este pseudo elemento está presente, WebKit inactiva su renderizado de scrollbar y solo usa la información que le hayamos dicho por CSS.

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

El ancho y alto indica el ancho de la barra vertical y el alto de la barra horizontal.

El scrollbar se estructura en los botones de scroll y el trayecto (track). El trayecto está a su vez dividido en sus partes y thumb.Las partes del trayecto representan el área arriba y debajo del thumb.

También la esquina de la barra puede ser estilizada, como la esquina de redimensionamiento usada en los textareas en el que su tamaño es modificable (Se puede ver cuando usamos Safari 4, por ejemplo).

Aquí se muestra la lista completa de todos los pseudo-elementos. Todos los pseudo-elementos deben de estar prefijados con -webkit-.

scrollbar
scrollbar-button
scrollbar-track
scrollbar-track-piece
scrollbar-thumb
scrollbar-corner
resizer

Cada uno de estos objetos pueden ser estilizados con sombras, imágenes de fondo, bordes, así que podemos crear una barra de scroll completamente personalizada usando WebKit CSS.

Las siguientes pseudo-clases pueden ser aplicadas a los pseudo-elementos descritos anteriormente:

: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. Para las partes del trayecto indica si esta bordea un botón del singleton.

: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).

Además, las pseudo-clases :enabled, :disabled, :hover and :active también funcionan con las partes de la barra de desplazamiento.

La propiedad display puede ser definida como “none” para ocultar partes específicas de la barra.

Los márgenes están soportados a lo largo de la barra. Pueden ser negativos (Para que el trayecto sea inflado y así cubrir los botones parcialmente).

El ejemplo mostrado contiene una barra de scroll personalizada con todos los comportamientos, se muestra de nuevo:

Ver ejemplo de la personalización de Scrollbars.

Recordamos que también podéis personalizar la barra de desplazamiento en Internet Explorer.

Vía | WebKit