CSS: cómo individualizar las barras de desplazamiento en los navegadores Webkit

Internet Explorer es capaz de hacerlo. Desde hace siglos, inmemoriales, casi. Estoy hablando de la personalización de sus barras de desplazamiento. Desde la versión 5.5, que se lanzó en julio de 2000, puedes individualizar los colores dentro de sus barras de desplazamiento. En la actualidad, los navegadores basados ​​en Webkit se han puesto al día con IE 5.5 y permiten una personalización aún más sofisticada: sus posibilidades no se limitan simplemente a cambiar los colores.

Algunos ejemplos de barras de desplazamiento individuales

Color, Ancho, Bordes

Existe una variedad de pseudo elementos para personalizar los diversos componentes de los que consta una barra de desplazamiento. Al igual que en cualquier elemento HTML ordinario, puede ajustar el fondo, así como el color de primer plano y cambiar el borde. Incluso se pueden lograr pistas de barra de desplazamiento punteadas y redondeadas con o sin gráficos de fondo. Estos pseudo elementos están a tu disposición:

::-webkit-scrollbar { } /* affects the whole scrollbar */
::-webkit-scrollbar-button { } /* arrow buttons */
::-webkit-scrollbar-track { } /* slider area */
::-webkit-scrollbar-thumb { } /* slider */
::-webkit-scrollbar-corner { } /* sizer (only visible in TEXTAREA) */

Tal como lo haría normalmente, ahora puede diseñar los pseudo elementos de esta manera:

::-webkit-scrollbar {
  width: 20px;
  background: yellow;
}

::-webkit-scrollbar-thumb {
  border: 2px dotted green;
  border-radius: 10px;
}

En nuestro ejemplo, coloreamos toda el área de la barra de desplazamiento de amarillo, definiendo un ancho de 20 píxeles. El control deslizante está rodeado por una línea punteada en un hermoso color verde. Además redondeamos un poco las esquinas. Ahora, si lo desea, puede personalizar aún más la barra según los estados del mouse mientras interactúa. Estas pseudoclases hacen el trabajo:

::-webkit-scrollbar-thumb:hover {
  background: red;
}

::-webkit-scrollbar-thumb:active {
  background: blue;
}

Solo falta una cosa. No puede usar transiciones CSS para efectos de animación fluidos. Esto sería especialmente elegante si estuviera disponible para cambiar entre los estados „hover“ y „active“. Bueno, ¿no necesitamos espacio para futuras mejoras? Aparte de eso, su creatividad no se ve frustrada. Si buscas un diseño elegante, digno o quieres salpicar los colores más llamativos, todo es posible.

Pseudoclases adicionales

Todavía hay más. Se pueden usar pseudoclases adicionales para una personalización aún mayor. Puedo ofrecerle la clase „:inactive-window“, que le permite diseñar los pseudo elementos para ventanas inactivas, mientras que las dos clases „:horizontal“ y „:vertical“ se ocupan de diferentes diseños en barras horizontales o verticales. :

::-webkit-scrollbar-thumb:horizontal {
  height: 12px;
}

Conclusión: Si tiene áreas de texto con varias filas en sus formularios, es posible que desee que las barras de desplazamiento que lo acompañan se ajusten al diseño general. Eso es lo que puedes hacer con estos pseudo elementos para navegadores Webkit. ¡Ve a por ello!

(dpe)