Cambiando el diseño de las barras de scroll con CSS

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
Descripción	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;
}

Barra de scroll personalizada con CSS

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.

body::-webkit-scrollbar {
    width: 1em;
}
 
body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
 
body::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}

La familia de propiedades de -webkit-scrollbar consta de siete pseudo-elementos diferentes que, juntos, comprenden un elemento completo de la interfaz de usuario de la barra de desplazamiento:

1. :: - webkit-scrollbar aborda el fondo de la barra en sí. Suele estar cubierto por los otros elementos.
2. :: - webkit-scrollbar-button dirige los botones de dirección en la barra de desplazamiento
3. :: - webkit-scrollbar-track trata el espacio vacío "debajo" de la barra de progreso
4. :: - webkit-scrollbar-track-piece es la capa superior de la barra de progreso que no está cubierta por el elemento de desplazamiento que se puede arrastrar (pulgar)
5. :: - webkit-scrollbar-thumb dirige el elemento de desplazamiento que se puede arrastrar y que cambia de tamaño según el tamaño del elemento desplazable
6. :: - webkit-scrollbar-corner se dirige a la esquina (generalmente) inferior del elemento desplazable, donde se pueden encontrar dos barras de desplazamiento
7. :: - webkit-resizer trata el controlador de cambio de tamaño que se puede arrastrar que aparece sobre la esquina de la barra de desplazamiento en la esquina inferior de algunos elementos

Además de estos pseudo-elementos, también hay once clases de pseudo-selector que no son necesarias, pero proporcionan a los diseñadores el poder de diseñar varios estados e interacciones de la IU de la barra de desplazamiento. 

Ejemplo

<div class="container">
  <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis explicabo, quia optio pariatur tempora architecto quisquam eaque dicta inventore quasi?</p>
  <p class="text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Recusandae voluptas provident, vitae deleniti nostrum impedit asperiores architecto veritatis iste maxime!</p>
  <p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem culpa velit libero quod ex hic rerum eius aliquid harum ipsam.</p>
  <p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel ipsa odio aperiam inventore rerum molestiae! Facilis porro veritatis beatae nihil.</p>
  <p class="text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Libero fuga iste provident quod quisquam cupiditate consequuntur numquam optio, nemo ab.</p>
    <p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem culpa velit libero quod ex hic rerum eius aliquid harum ipsam.</p>
  <p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel ipsa odio aperiam inventore rerum molestiae! Facilis porro veritatis beatae nihil.</p>
  <p class="text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Libero fuga iste provident quod quisquam cupiditate consequuntur numquam optio, nemo ab.</p>
</div>

@charset "UTF-8";

/* Reset básico */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Centrar contenedor vertical y horizontalmente */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-color: #f2f2f2;
}

/* Estilos del contenedor */
.container {
  padding: 1rem 1.5rem;
  width: 300px;
  height: 400px;
  background-color: #fff;
  border-radius: 0.25rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  color: #333;
  font-family: sans-serif;
  text-align: justify;
  line-height: 1.3;
  overflow: auto;
}

.container p:not(:last-child) {
  margin-bottom: 1rem;
}

/* Tamaño del scroll */
.container::-webkit-scrollbar {
  width: 8px;
}

 /* Estilos barra (thumb) de scroll */
.container::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}

.container::-webkit-scrollbar-thumb:active {
  background-color: #999999;
}

.container::-webkit-scrollbar-thumb:hover {
  background: #b3b3b3;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
}

 /* Estilos track de scroll */
.container::-webkit-scrollbar-track {
  background: #e1e1e1;
  border-radius: 4px;
}

.container::-webkit-scrollbar-track:hover, 
.container::-webkit-scrollbar-track:active {
  background: #d4d4d4;
}

Y de esta manera tan sencilla podrás crear variedad de estilos para la barra de scroll y usarlos donde lo requieras en tu web.