Personalizar el scroll con CSS

Diseñar un scrollbar compatible con todos los navegadores

Antes de ponernos a personalizar nuestro scroll con CSS conviene saber qué elementos podemos modificar para que el diseño de nuestro scrollbar sea compatible con la mayor cantidad de navegadores posibles.

A este respecto decir que desde el cambio de Edge a Webkit, usando métodos prefijados (-webkit-), podemos personalizar nuestro scroll por igual en casi la totalidad de los navegadores modernos. Sin embargo, es importante entender que este método no es estándar y por lo tanto es susceptible de quedar obsoleto en el futuro.

Por otro lado entre los navegadores no webkit, tenemos a Firefox que sí soporta los estándares. Lamentablemente éstos permiten una estilización muy limitada, aunque, en mi opinión, suficiente para embellecer nuestras páginas. Por esa razón vamos a abordar el tema en dos fases. Primero partiremos de esos estándares para personalizar nuestro scroll y replicaremos exactamente el mismo diseño con webkit. Y a continuación veremos algunas técnicas que harán que nuestras barras de scroll sean perfectas.

Nota de actualización 29/02/2024: desde sus respectivas versiones 121, Chrome y Edge ya soporta los estándares al igual que Firefox pero no con idéntico resultado. Firefox Mobile tambien los soporta desde su versión 122. Todos ellos además, así como el resto de Webkits siguen pudiendose estilizar con los métodos CSS prefijados (-webkit-) que veremos en las segunda parte de este artículo.

Personalizar el scroll con estándares (FF, Chrome, Edge y Opera) 

En cuanto al aspecto se refiere, podremos modificar su color y su ancho, pero hay otros efectos que podremos replicar en todos los navegadores. Empecemos con el color y el ancho.

Scrollbar-color

Básicamente permite dos valores que corresponderán con en color del thumb y del track, es decir el del manejador o controlador deslizante y el de la barra de scroll.

elemento {
  scrollbar-color: #09C transparent;
}

Scrollbar-width

A parte de los valores globales, comunes a todos atributos CSS, ofrece tres opciones: auto, thin y none. Lamentablemente no soporta un valor numérico.

elemento {
  scrollbar-width: auto | thin | none;
}

Scrollbar-width: auto

Es el valor por defecto y básicamente deja los estilos a cargo del navegador

Scrollbar-width: thin

Firefox muestra una variante más estrecha de 8px que, además, pierde las flechas de control.

Actualización 29/02/2024: El srcroll de los tres Webkit mide 10-11px de grosor, de los cuales, el thumb ocupa 6-7px, dejando un margen de 2px a cada lado respecto del track. Además, no pierden las flechas de control.

Scrollbar-width: none

Esconde el scroll pero no pierde su función. Es la mejor forma en que podemos ocultar el scroll en FF si queremos manejar el scroll con controladores propios como flechas de paginación. Y es replicable con métodos prefijados (-webkit-).

elemento {
  scrollbar-width: none;
}
elemento::-webkit-scrollbar {
  width: 0;
}

Personalizar el scroll para Webkit (-webkit-)

Antes de complicar la cosa, vamos a replicar lo que ya tenemos, en Chrome, Safari, Opera y Edge, también para los webviews.

Actualización 29/02/2024:  Para poder obtener el mismo aspecto en todos los navegadores tendremos que restringir los estándares para FF. De otra forma, éstos prevalecerían sobre las reglas prefijadas.

@-moz-document url-prefix() { 
 elemento {
  /*Firefox*/
  scrollbar-color: #09C transparent;
  scrollbar-width: thin;
 }
}
elemento::-webkit-scrollbar-track {
  background-color: transparent; /*color de la barra de fondo*/
}
elemento::-webkit-scrollbar-thumb {
  background-color: #09C; /*color del manejador*/
}
elemento::-webkit-scrollbar {
  width: 8px; /*ancho del scroll vertical*/
  height: 8px; /*alto del scroll horizontal*/
}

Y con esto obtendríamos ya nuestros scroll vertical y horizontal de aspecto moderno para todos los navegadores.

See the Pen
Scroll overlay by Daniel Abril (@elcssar)
on CodePen.

Con el uso de «transparent» para el color de fondo de las barras de scroll conseguimos un efecto de superposición similar a un mobile scrollbar, las barras de scroll propias de los dispositivos móviles. Sin embargo, ese efecto no es real, pues el espacio lo ocupa la barra mientras esté visible o activa. Pero ¿qué sucede cuando el contenido no provoca overflow?, pues que ese espacio lo ocupa el contenido al desaparecer el scroll, provocando un salto visual, un efecto molesto a la vista con el que seguro os habréis topado. Para solucionarlo vamos a ver 2 opciones:

Scrollbar-gutter

La propiedad scrollbar-gutter permite reservar un espacio para el scroll haya o no overflow, a menos que el valor del atributo overflow sea overlay. Soporta los valores auto, stable y both-edges.

Scrollbar-gutter: auto

Es el valor por defecto. Creará un canal, un espacio reservado para la barra de scroll sólo cuando el valor del atributo overflow sea scroll, o auto si existe overflow, pero no con overlay.

Scrollbar-gutter: stable

Reservará dicho espacio para cualquier valor de overflow excepto overlay, haya o no overflow.

Scrollbar-gutter: stable both-edges

Puede añadirse both-edges a stable para reservar un espacio simétrico en ambos extremos de la línea de la caja.

Juega con el alto del siguiente Codepen para ver la diferencia con un scroll estándar cuando se muestra y oculta el scroll debido al desborde del contenido.

See the Pen
Scroll CSS for FF and Webkit by Daniel Abril (@elcssar)
on CodePen.

Actualmente este atributo sólo lo soportan Edge, Chrome y Opera desktop, ni Firefox, ni Safari (Mac/iOS) ni por supuesto IE, entre otros, le dan soporte. Sin embargo es el estándar al que aspiramos y si tenemos en cuenta que IE está obsoleto, Firefox es el único que soporta scrollbar-width y scrollbar-color, por lo que es probable que en breve también soporte scrollbar-gutter, y Safari utiliza el efecto de superposición, como hacen los navegadores móviles, puede que la solución encaje en tu abanico de usuarios.

Nota: según las especificaciones del borrador del W3C, scrollbar-gutter podría llegar a soportar otros valores como «always»  que haría que incluso overlay reservase ese canal para el scroll tanto si hay overflow como si no, y añadiendo «force» se reservaría el canal incluso para los valores de overflow visible, hidden y clip.

Overflow: overlay

Actualización 24/06/2023: desde el despliegue de la versión 114 de Chrome el 30 de mayo, Chrome a eliminado overflow: overlay, dejando el valor overlay como un simple alias de auto, tal como ya lo hacía Safari. La buena noticia es que Firefox ya soporta scrollbar-gutter desde su versión 97(February 8, 2022). Así, la solución basada en el standard scrollbar-gutter se convierte en la adecuada para evitar que el overflow nos desmonte el layout, mientras que el valor no estándar «overlay» de la propiedad overflow, queda obsoleto, aunque algunos navegadores cómo Firefox aún sigan dándole soporte.

La segunda opción es simular un mobile scrollbar. Este sería el método para crear realmente un scroll superpuesto, o scroll overlay; nos permite simular en desktop el efecto de transparencias propio de los móviles, pero jugando con el :hover del ratón en lugar de al activarse el scroll.

En cuanto a su soporte en navegadores el mayor problema es Firefox, porque Safari sí lo soporta sólo que lo interpreta como auto. Por suerte, Safari por defecto superpone el scroll al contenido. A Firefox, sin embargo, tendremos que darle una salida elegante que consiste en restar el ancho del scroll (8px) a nuestro padding derecho o izquierdo en función de la dirección del texto (ltr o rtl) y fijar el scrollbar con overflow: scroll.

elemento {
 padding: [valor top,right,bottom,left]
/*Firefox*/
  overflow: scroll;

/*webkit*/
  overflow: overlay;
}

/*Firefox*/
@-moz-document url-prefix() { /*hack para Firefox*/
 elemento {
   padding-right: [valor right] - 8px) /*ancho del canal del scroll en modo thin para texto ltr*/
   scrollbar-color: rgba(0,153,204, 0.15) transparent; /*manejador semi-translúcido en FF*/
   scrollbar-width: thin; /*8px*/
 }
 elemento:hover{
   scrollbar-color: rgba(0,153,204, 1) transparent; /*manejador opaco*/
 }
}


/*webkit*/
elemento::-webkit-scrollbar {
  width: 8px;
  height: 8px
}
elemento::-webkit-scrollbar-track {
  background-color: transparent; /*fondo del scroll transparente*/
}
elemento::-webkit-scrollbar-thumb {
  background-color: rgba(0,153,204, 0.15); /*manejador semi-translúcido*/
}
elemento:hover::-webkit-scrollbar-thumb {
  background-color: rgba(0,153,204, 1); /*manejador opaco*/
}

Y de esta forma logramos un scroll superpuesto al contenido estable, tanto si se produce overflow como si no.

See the Pen
Scroll overlay by Daniel Abril (@elcssar)
on CodePen.

Soporte en navegadores de estilos CSS para el scroll

Tabla actualizada el 29/02/2024

atributo/navegador	IE	EDGE	FF	Chrome	Opera	Nav. Android	Safari
scrollbar-color	NO					NO	NO
scrollbar-width	NO					NO	NO
scrollbar-gutter	NO		NO				NO
::-webkit-scrollbar	NO		NO				*
overflow: overlay	NO	NO	NO	NO		NO	NO
scrollbar-face-color		NO	NO	NO	NO	NO	NO

*No está soportado en el webview

Tal como se observa en el cuadro los navegadores que no soportan los estándares, tienen sus métodos propietarios. Incluido Internet explorer, que de hecho fue el primero en permitir la personalización del scroll, aunque ahora sea un navegador obsoleto, razón por la que no le hemos dedicado más espacio en este artículo. Pero por si os pica la curiosidad o tenéis que dar soporte a sistemas que no se han actualizado y sólo funcionan en IE, os dejo algunas de las propiedades que permitían cambiar los colores del scroll, antes de la llegada de los estándares.

scrollbar-face-color
scrollbar-shadow-color
scrollbar-highlight-color
scrollbar-3dlight-color
scrollbar-darkshadow-color
scrollbar-track-color
scrollbar-arrow-color

Espero que os haya sido útil. No olvidéis subscribiros para no perderos los próximos artículos en los que veremos cómo personalizar todas las partes de un scroll en navegadores Webkit y aprenderemos cómo replicar un scroll mobile con nuestros propios estilos.