en CSS

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

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.

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.

Pero no todo está perdido, para la mayoría de los navegadores, excepto Firefox, tenemos 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:

Ocultar la barra de scroll con ::-webkit-scrollbar
section {
overflow: auto; /*Graceful degradation para Firefox*/
overflow: overlay;
}

/*Webkit(Chrome, Android browser, Safari, Edge...)*/
section::-webkit-scrollbar {
display: none;
}
section:hover::-webkit-scrollbar {
display: initial;
}
section::-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.

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.

section {
scroll-width: none; /*Firefox*/
}

/*Webkit(Chrome, Android browser, Safari, Edge...)*/
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.

Deja tu comentario

Comentario