Una de las recomendaciones fundamentales para una buena usabilidad es no
modificar en exceso el diseño de los elementos que forman parte de la interfaz
de usuario del sistema operativo, tales como botones, elementos <select>, las
barras de scroll, etc. Hacerlo complica el uso de tu sitio o aplicación web
porque el usuario tiene que aprender a reconocerlos.
No obstante, como toda norma tiene sus excepciones, a veces puede ser necesario modificar estos elementos en algunos diseños muy especiales. Firefox 64, publicado en diciembre de 2018, añade entre sus nuevas funcionalidades la posibilidad de cambiar el diseño de las barras de scroll.
En concreto, lo hace a través del estándar CSS Scrollbars Module Level 1, que todavía se encuentra en fase de borrador y no es un estándar oficial. Los tres escenarios para los que se ha pensado este estándar son:
- Cambiar el color de las barras de scroll para adaptarlas al diseño de la aplicación o sitio web.
- Mostrar barras de scroll más finas de lo normal cuando un elemento lo requiera.
- Diseñar barras de scroll totalmente personalizadas si el diseño así lo requiere.
Para ello se han definido dos nuevas propiedades CSS (scrollbar-color y
scrollbar-width) que se pueden aplicar a la página entera y también a cualquier
elemento que soporte la propiedad overflow de CSS:
Posibles valores de la propiedad scrollbar-color
| Valor | Descripción |
|---|---|
auto |
usa el color por defecto del sistema operativo |
dark |
usa una variante más oscura del color por defecto (escogida automáticamente por el navegador o sistema operativo) |
light |
usa una variante más clara del color por defecto (escogida automáticamente por el navegador o sistema operativo) |
<color> |
un par de colores CSS siendo el primero el color de fondo del tirador (scrollbar thumb) y siendo el segundo el color de fondo de la barra entera (scrollbar track) |
Posibles valores de la propiedad scrollbar-width
| Valor | Descripción |
|---|---|
auto |
usa la anchura por defecto del sistema operativo |
thin |
usa una variante más delgada de la anchura por defecto (escogida automáticamente por el navegador o sistema operativo) |
none |
oculta la barra de scroll completamente (aunque se puede seguir haciendo scroll en el elemento) |
<medida> |
una unidad de medida CSS válida indicando la anchura de la barra de scroll (no se pueden definir diferentes anchuras para el tirador y la barra) |
El siguiente ejemplo muestra estas dos propiedades en la práctica:
.selector {
/* definir una altura pequeña para forzar el scroll */
height: 100px;
overflow-y: scroll;
width: 300px;
/* cambiar el estilo por defecto de la barra de scroll */
scrollbar-color: yellow #800080;
scrollbar-width: 10px;
}Así es como se ve este ejemplo en tu navegador:
Y así es como debería verse si tu navegador tiene soporte para estas nuevas propiedades:
Si necesitas cambiar el estilo de la barra de scroll en otros navegadores,
puedes utilizar estas otras propiedades CSS, aunque no es seguro hacerlo
porque no son estándar y en el futuro desaparecerán en favor de scrollbar-color
y scrollbar-width.