Cómo personalizar la barra de desplazamiento (scrollbar) del explorador con (WebKit) CSS

La barra de desplazamiento del explorador, probablemente el unico elemento de la ventana que no coincide con el estilo de tu sitio web, no es cierto? La personalización de este elemento no es una tarea facil de conseguir. Al menos, no solo con CSS, sin embargo no imposible. Google Chrome introdujo el selector CSS -webkit-scrollbar selector que te permite personalizar solamente con CSS la barra de desplazamiento como quieras.

Los exploradores basados en webKit te permiten usar los siguientes selectores para aplicar estilo a la barra de desplazamiento:

::-webkit-scrollbar {
  /*Sel 1 -Propiedades*/
}
::-webkit-scrollbar-button{
  /*Sel 2 -Propiedades*/
}
::-webkit-scrollbar-track{
  /*Sel 3 -Propiedades*/
}
::-webkit-scrollbar-track-piece{
  /*Sel 4 -Propiedades*/
}
::-webkit-scrollbar-thumb{ 
  /*Sel 5 -Propiedades*/
}
::-webkit-scrollbar-corner{
  /*Sel 6 -Propiedades*/
}
::-webkit-resizer{
  /*Sel 7 -Propiedades*/
}

See every selector as a part of a scrollable div :

Scrollbar parts

Y cada selector tiene estados diferentes (pseudo selectores) como mostrados en el siguiente ejemplo:

:horizontal
:vertical
:decrement
:increment
:start
:end 
:double-button
:single-button
:no-button
:corner-present
:window-inactive

/** 
 * Cuando la pieza de desplazamiento esta en el inicio
 */
::-webkit-scrollbar-track-piece:start {
   /* Selecciona la mitad superior (o mitad inferior izqueirda de acuerdo a la orientación) individualmente*/
}
/* Cuando la barra está en orientación vertical*/
::-webkit-scrollbar-thumb:vertical {
    height: 50px;
    background-color: black;
}

Cada estado se describe en la siguiente tabla:

:horizontal La pseudo clase horizontal aplica a cualquier pieza de la barra de desplazamiento que tiene orientación horizontal
:vertical La pseudo clase vertical aplica a cualquier pieza de la barra de desplazamiento que tiene orientación vertical
:decrement La pseudo-clase decrement se aplica a los botones y piezas de la barra de desplazamiento. Indica si el botón o la barra disminuirá la posición de la vista cuando se utiliza (por ejemplo, en una barra de desplazamiento vertical, a la izquierda en una barra de desplazamiento horizontal).
:increment La pseudo-clase increment se aplica a los botones y trozos de pista. Indica si es o no un botón o pieza incrementará la posición de la vista cuando se utiliza (por ejemplo, sobre una barra de desplazamiento vertical, justo en una barra de desplazamiento horizontal).
:start La pseudo clase start aplica a todos los botones y elementos de la barra de desplazamiento. Esta indica cuando un objeto esta localizado antes de un boton.
:end La pseudo clase end aplica a los botones y piezas de la barra. Indica cuando el objeto está localizado despues del boton final.
:double-button  La pseudo clase double-button aplica a todos los botones y piezas de la barra. Es usada para detectar cuando un boton es parte de un par de botones que estan junto en la misma area final del barra de desplazamiento.Para las barras indica cuando estan disponibles los dos botones de scroll.
:single-button La pseudo clase single-button aplica a los botones y piezas de la barra de desplazamiento. Esta es usada para detectar cuando un boton existe al final de la barra de desplazamiento.
:no-button Aplica a las piezas de la barra de desplazamiento e indica cuando la pieza esta en el borde de la barra. Por ejemplo, no hay boton al final de la barra.
:corner-present Aplica a todas las barras de desplazamiento e indica cuando la esquina de la barra es visible o no.
:window-inactive Aplica a todas las barras de desplazamiento e indica cuando la ventana que contiene la barra está activa o no.(esta pseudo-clase aplica tambien como ::selection).

Explora el siguiente fiddle en Chrome:

O observa el siguiente ejemplo más elaborado en la siguiente página web:

Como puedes ver, esta caracteristica es bastante prometedora e interesante. Intenta combinar varios selectores y crea tu propia barra de desplazamiento en Google Chrome!

Soporte multiexplorador

Hasta la fecha, solamente Google Chrome soporta la aplicación de estilos a la barra con CSS. Sin embargo, no es el fin de la historia si realmente necesitas esta caracteristica en tu proyecto, pues puedes personalizarla con Javascript usando un Plugin para que funcione en cualquier explorador. Te recomendamos leer este top de 7 de los mejores plugins de barras de desplazamiento personalizadas con Javascript aquí.

Que te diviertas !

Esto podría ser de tu interes

Conviertete en un programador más sociable