Barras de desplazamiento al pasar el ratón

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 ratón. Incluso el propio macOS ¹ oculta las barras de desplazamiento de forma predeterminada, revelándolas contextualmente y en interacción. Lo mismo en iOS, lo que genera momentos confusos.

Aparte de eso, aquí hay una manera de ocultar las barras de desplazamiento de forma predeterminada, revelándolas solo cuando se pasa el cursor sobre el elemento. 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 maskcubre la barra de desplazamiento! Entonces, si creas una maskbarra que sea exactamente tan ancha como la barra de desplazamiento (aquí, supongo que 17px la cubrirá) y súper alta (ambas probablemente deberían calcularse mediante un script), puede cubrir perfectamente la barra de desplazamiento. barra de desplazamiento. Puedes igualar transitionla posición de la máscara, simulando un efecto de aparición y desaparición gradual. Muy inteligente.

En particular, esta es la barra de desplazamiento real del elemento, y no falsa. Fingir uno podría ser otro enfoque. Ben Nadel explicó cómo Slack hace eso. Su truco consiste en forzar que la barra de desplazamiento se represente en un área oculta por desbordamiento y crear una barra de desplazamiento virtual que imite la nativa (sobre la que luego tendría un control más directo). Tampoco se trata de forzar la barra de desplazamiento, que es otra cosa que puedes hacer si estás motivado. Y nada de esto le impide diseñar la barra de desplazamiento, lo que en realidad podría tener algunos beneficios, como especificar su ancho exacto.

1. Mientras escribe: si su dispositivo permite gestos, las barras de desplazamiento están ocultas hasta que comienza a desplazarse. De lo contrario, son visibles. ↩️