Ocultar el scroll con CSS – hide scroll

El scroll es probablemente uno de los elementos de sistema que siempre ha preocupado más  en diseño web por su presencia perenne en el momento que nuestro contenido sobrepasa el tamaño de la ventana o del elemento contenedor. Esto ha llevado a la comunidad a buscar distintas formas de afrontar el problema; desde personalizar el scrollbar mediante CSS o javascript, hasta esconderlo con métodos creativos. Y a la vez a los equipos de desarrollo de los distintos navegadores a hacer propuestas de estandarización.

El mayor problema que se debía afrontar era, en muchas ocasiones, la diferencia de anchura que se produce al activarse el scroll (y), cosa que a su vez podía desembocar en la activación de la otra dimensión (x) del scroll. De ahí la necesidad, más allá de su estilización, de ocultarlo.

¿Cómo ocultar el scroll mediante CSS sin perder su funcionalidad?

Antaño, las opciones eran limitadas y se solía recurrir al javascript para personalizar las barras de scroll o combinarlo con el atributo overflow para ocultarlas y mantener la capacidad de movernos por el contenido, a veces incluso simulando la barra artificialmente. En este artículo vamos a ver algunos atributos CSS que nos permitirán esconderlo o soslayar el problema mencionado del cambio de anchura, evitando el uso de javascript.

Esconder el scroll con CSS overflow

El atributo overflow nos permite controlar dónde y cómo se muestra el scroll en sus dos dimensiones (x,y) en el momento de producirse el desbordamiento, permitiendo varios valores que determinarán la relación entre las barras de control del contenedor y la visibilidad de su contenido:

• Overflow: auto mostrará automáticamente las barras que sean necesarias para deslizar el contenido desbordante dentro de su contenedor.
• Overflow: scroll mostrará siempre las dos barras, vertical y horizontal, sean o no necesarias.
• Overflow: visible ocultará las barras, haciendo que el contenido sea siempre visible, lo que rara vez es muy útil, ya que normalmente esto haría que los contenidos quedasen superpuestos, cosa que en el caso de texto o fotografías se me antoja contraproducente. Aunque puede haber en algún caso en el que este valor pueda ser útil. Curiosamente es el valor por defecto.
• Overflow: hidden, al contrario que el anterior, ocultará siempre el contenido, así como las barras, por lo que no será accesible mediante la rueda del ratón o swipe, a menos que usemos javascript.
• Overflow: overlay básicamente es como auto pero las barras se superponen al contenido, tal como hacen los navegadores móviles.

Actualización 25/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, por lo que ya sólo Opera y algunos navegadores chinos le dan soporte. RIP overflow overlay. 

Por supuesto a estos valores hemos de añadir, como a cualquier otra propiedad CSS, los valores initial, inherit y unset, o revert, aunque éste último está poco soportado especialmente en navegadores móviles.

Todos los valores además se pueden aplicar individualmente a cada dimensión (x, y), tanto en su forma simplificada overflow: [x] [y];, como mediante las propiedades oveflow-x y overflow-y.

Por último matizar que si no se establece un alto, o un ancho en el caso del scroll horizontal, overflow no tendrá efecto pues el contenido forzará sus límites.

Overflow hidden vs Overflow overlay

Vamos a ver dos soluciones desde perspectivas diferentes: esconder las barras de scroll o superponerlas. Ambas tienen sus pros y sus contras.

Una técnica del pasado para ocultar el scroll

Overflow: hidden parece, a priori, no resolver el problema porque perdemos la funcionalidad y además la percepción del tamaño del scroll, pero en el propósito de este artículo ya viene implícita la asunción de que el scroll dejará de verse; sin embargo, lo que no deseamos es que el contenedor pierda la capacidad de navegar por su contenido deslizándolo arriba y abajo. Por eso una técnica clásica fue utilizar un elemento padre con overflow: hidden para esconder la barra de scroll del padre directo del contenido que debe poderse navegar. Algo así:

See the Pen
Hidden scroll by Daniel Abril (@elcssar)
on CodePen.

Esta técnica clásica combina bien con navegación de flechas como ocurre con, por ejemplo, galerías de fotos. De esta forma conservamos la capacidad de scroll y, gracias a las flechas, no perdemos la percepción de que hay contenido oculto accesible mediante la rueda del ratón o haciendo swipe si es un dispositivo mobile. Por otro lado, tiene el pequeño inconveniente de que el tamaño de los scrolls en los distintos navegadores no es consistente, por lo que el resultado debe testarse y ajustarse independientemente para cada uno de ellos, lo que en ocasiones no es posible.

Simular el comportamiento de un scroll móvil

Pero no todo está perdido, para la mayoría de los navegadores, excepto Firefox, tenemos una mejor opción: Actualización 25/06/2023: Puesto que Chrome, y con él Edge, han decidido eliminar el valor overlay de overflow, ya sólo Opera nos aporta una mejor opción: superponerlo con overflow: overlay, y ocultarlo y mostrarlo mediante :hover aplicado a ::-webkit-scrollbar. Safari soporta el valor overlay, pero se comporta como auto, que, puesto que el scroll de Safari ya aparece superpuesto, no representa diferencia alguna. La técnica es tan sencilla como esto:

Alternativa con scrollbar-gutter 

Actualización 25/06/2023: Para que no os vayáis con mal sabor de boca os voy a dejar una alternativa a overlay. Se trata de usar scrollbar-gutter, que desde la actualización de Firefox a su versión 97(February 8, 2022), ya tiene soporte en la mayoría de navegadores modernos, excepto Safari, que por suerte usa scrolls overlay por defecto. Podéis leer más sobre él en el enlace que os dejo al final del artículo, pero os dejo también aquí el código:

Ocultar la barra de scroll con ::-webkit-scrollbar

section {
 overflow: auto; /*Graceful degradation para Firefox*/
 overflow: overlay;/*Progressive enhancement para Opera*/
 scrollbar-gutter: stable;
}

/*Webkit(Chrome, Android browser, Safari, Edge...)*/
section::-webkit-scrollbar {
 display: none; /*Para que scrollbar-gutter funcione la barra de scroll debe existir*/
 background-color: transparent;
}
section:hover::-webkit-scrollbar {
 display: initial;
}
 /*Ahora para esconderlo deberemos cambiar el color del manejador a transparente*/
section::-webkit-scrollbar-thumb {
background-color: transparent;
}
section:hover::-webkit-scrollbar-thumb {
background-color: #09C;
}

Para que la magia ocurra tendremos que dar algunos estilos mínimos  a la barra, de otra forma no se hará visible. Por ello usamos ::-webkit-scrollbar-thumb, para darle un color.

El siguiente ejemplo está ya actualizado:

See the Pen
Hide / show scroll by Daniel Abril (@elcssar)
on CodePen.

Ocultar el scrollbar con scrollbar-width

El último método que vamos a ver se basa en modificar el ancho de la barra de scroll (scrollbar). Para ello, de nuevo tendremos que usar una técnica doble para poder modificar su ancho tanto en Webkit como en Firefox.

Actualización 01/03/2024: Opera, Firefox Mobile desde la versión 122, así como Chrome y  Edge desde la versión 121, ya soportan scrollbar-width

section {
 scrollbar-width: none; /*Firefox, Opera, Chrome y Edge*/
}

/*Webkit(Android browser, Safari y otros webkit)*/
section::-webkit-scrollbar {
 width: 0;
}

See the Pen
Hide scrollbar with scroll-width by Daniel Abril (@elcssar)
on CodePen.

To hide or not to hide scrollbar

Esa es la cuestión. Pues bien, ahora que sabemos ocultar el scrollbar, decir que en la mayoría de los casos deberíais plantearos una alternativa menos intrusiva como por ejemplo personalizar el scrollbar. Ya hemos visto que podemos modificar su ancho con CSS, pues bien, también podemos cambiarle los colores, y en Webkit incluso el borde, los cantos, el fondo y otros elementos como las flechas; y además, tal como hemos visto, superponerlo y simular el comportamiento de mobile con overflow: overlay aprovechando la capacidad :hover del ratón.

Con todas estas opciones de personalización parece que los casos en los que se puede requerir ocultar las barras de scroll permanentemente se reducen casi en su totalidad.

Espero que os haya sido útil y como siempre no dudéis en dejar vuestra preguntas y comentarios.