Así es como me desplazo

¿Cómo sabes que una página (o cualquier elemento de esa página) se desplaza? Bueno, si tiene una barra de desplazamiento, es una indicación bastante buena. Es posible que aún tengas que discutir con tu cliente sobre “el pliegue” o lo que sea, pero no creo que nadie esté confundido sobre qué es una barra de desplazamiento o qué indica.

Pero digamos que no hay barra de desplazamiento. Eso es muy común. macOS oculta las barras de desplazamiento de forma predeterminada y solo las muestra durante el desplazamiento. La mayoría de los navegadores móviles no tienen barras de desplazamiento, incluso si intentas forzarlas con algo como overflow: scroll;.

¿Por qué esto importa? Si no sabe que se puede desplazar por un área, es posible que se pierda contenido o funciones importantes.

Pienso regularmente en la historia Perfectly Cropped de Tyler Hall. Hay una pantalla en iOS que tiene una funcionalidad importante a la que debes desplazarte hacia abajo, pero no hay ningún indicador de que puedas desplazarte allí.

El resultado de esto fue que la madre de Tyler literalmente no pudo encontrar la funcionalidad a la que estaba acostumbrada. No es bueno.

Hay una manera elaborada de detectar barras de desplazamiento visibles y forzarlas a ser visibles, pero hay algo en eso que me molesta. No respeta las preferencias del usuario (suponiendo que sean las preferencias del usuario), requiere pruebas de manipulación de DOM y utiliza CSS con prefijo del proveedor (que probablemente durará mucho tiempo, pero se ha estandarizado ahora, por lo que tal vez no para siempre).

Disfruto de estos enfoques y de Chris Smith y su pensamiento:

Mis favoritas son las técnicas basadas en sombras. Para mí, una sombra insertada es un indicador muy claro, ya que hace que parezca que el contenido fluye por debajo y la sombra sigue un borde que indica que puedes desplazarte en esa dirección. Además, tienes control de CSS allí, por lo que creo que podría coincidir con cualquier situación de UI en la que te encuentres con bastante facilidad.

Sin embargo, debe saberse que se puede hacer completamente en CSS, sin JavaScript, y es uno de los grandes trucos de CSS.