Usar el scroll horizontal en CSS para los dispositivos móviles

Una de las maravillas que nos ofrece CSS es la propiedad overflow, que nos permite controlar cómo se comporta un contenedor como las capas. Una de las opciones es que oculte el contenido cuando éste se desborde. Otra consta de insertar un scroll cuando el contenido se desborde, permitiendo tener una barra de desplazamiento para ver el contenido restante. Y por último configurar estas opciones automáticamente para que cuando se desborde aparezca el scroll, y si no pasa eso pues el contenedor actúa normalmente.

Para las aplicaciones móviles podemos hacer uso de esta propiedad, por eso vamos a ver cómo usar el scroll horizontal en CSS para los dispositivos móviles, ya que podemos crear controles muy interesantes, como una pequeña galería de imágenes, como la que vamos a hacer.

Demo del tutorial

HTML

Para implementar esto necesitamos solamente una capa que servirá de contenedor, y nuestras imágenes o el contenido que queramos que se desborde.

CSS

Para implementar el control se hacen dos cosas, primero tenemos que configurar nuestro contenedor para que se pueda desbordar con un ancho fijo, para que oculte el contenido con el overflow oculto y para que sólo se pueda desplazar horizontalmente. Un dato es que usamos la propiedad de espacio en blanco para que nuestro contenido continúe horizontalmente y no de un salto de línea.

Sin embargo si probamos nuestro control veremos que el contenido sigue apareciendo hacía abajo, y es porque necesitamos decirle que cada elemento se muestre en línea, por eso recurrimos al inline-block, para que nuestro contenido no de saltos de línea.

Listo, ya tenemos nuestra galería de imágenes que podemos controlar desde nuestro dispositivo móvil, y puesto que al final es un scroll horizontal podemos arrastrar para seguir viendo las demás imágenes sin tener que recurrir a programación para implementar este gesto.