Primero, las barras de desplazamiento son una cuestión de usabilidad y accesibilidad. En segundo lugar, una regla general: si un área se desplaza, debería tener una barra de desplazamiento visible. Pero la web es un lugar grande y me gustan los trucos, así que voy a cubrir la idea de revelarlos solo al pasar el mouse. Incluso el propio macOS¹ oculta las barras de desplazamiento de forma predeterminada, revelándolas contextualmente y en la interacción. Lo mismo en iOS, lo que lleva a momentos confusos.
Aparte de todo eso, aquí hay una forma de ocultar las barras de desplazamiento de forma predeterminada, y solo las revela cuando el elemento está suspendido. Fue creado por Thomas Gladdines, quien también me envió un correo electrónico al respecto:
En una prueba rápida en mi máquina, funciona en Chrome, Firefox y Safari, independientemente de mi configuración de macOS. Muy robusto.
El truco es que mask
cubre la barra de desplazamiento! Entonces, si crea un mask
que es exactamente tan ancho como la barra de desplazamiento (aquí, solo supongo que 17px lo cubrirá) y súper alto (ambos probablemente deberían ser calculados por un script), puede cubrir perfectamente la barra de desplazamiento. Usted puede incluso transition
la posición de la máscara, simulando un efecto de desvanecimiento. Muy inteligente.
En particular, esta es la barra de desplazamiento real del elemento, y no una falsa. Fingir uno podría ser otro enfoque. Ben Nadel habló sobre cómo Slack hace eso. Su truco consiste en obligar a la barra de desplazamiento a renderizarse en un área oculta por el desbordamiento y hacer una barra de desplazamiento virtual que imite a la nativa (sobre la que tendrías un control más directo). Tampoco está forzando la barra de desplazamiento, que es otra cosa que puede hacer si está motivado. Y nada de esto le impide diseñar la barra de desplazamiento, lo que en realidad podría tener algunos beneficios, como especificar el ancho exacto de la misma.
- Mientras escribo: si su dispositivo permite los gestos, las barras de desplazamiento están ocultas hasta que comience a desplazarse. De lo contrario, son visibles. ↩️