Hoy en día estamos tan acostumbrados a consumir el contenido web (páginas web), e incluso aplicaciones móviles, de la misma manera, de forma vertical y de arriba a abajo. Por ejemplo, algunas de las redes sociales más visitadas como Facebook, Twitter o Youtube muestran la mayor parte de su contenido en forma de listas que se consumen de arriba hacia abajo.
¿Se han preguntado por qué?
Podemos asumir que es por estar acostumbrados a leer en ese orden, de arriba hacia abajo, influenciado por limitaciones técnicas o simplemente porque es mas eficiente, ya que de ser horizontal, por cada línea de texto habría que volver al inicio. Sin embargo el formato de desplazamiento vertical fue adoptado como una norma por el primer procesador de texto en 1960, basado en el “Códice” (del latín codex, uno de los formatos de libro más utilizado), marcando el camino a seguir para las demás tecnologías.
Actualmente, es probable que este tema tenga que ver con los tipos de dispositivos que utilizamos, ya que las pantallas de los móviles y la manera en que se interactúa con ellos hacen mas intituivo el desplazamiento o incluso por razones de diseño, experiencia de usuario, entre otros pues, de esta manera, permite mostrar el contenido en un orden específico al usuario tomando el control de como se consume la información.
¿Qué sucede cuando necesitamos desplazarnos horizontalmente?
Está fue a una situación que nos presentó hace unos días, al programar una interfaz para un sistema dónde se muestra una lista de tarjetas, nos solicitaron que cambiáramos dicha lista de desplazamiento vertical a horizontal. Si han programado o diseñado páginas web, seguramente recordarán que incluso la estructura recomendada por HTML 5 esta pensada para el desplazamiento vertical.
Y seguramente también han utilizando alguna librería como Bootstrap las cuales están hechas para simplificarnos la vida y no reinventar la rueda, pues estas también están pensadas para navegarse de forma vertical y no horizontal, así que vamos en sentido contrario, pero por suerte todo se puede arreglar con un poco de Javascript y CSS, ¿no?.
Desplazamiento horizontal, ¿Cómo solucionarlo?
Aquí nos ponemos técnicos. Existen algunas soluciones que suelen recomendarse para lograr el desplazamiento horizontal, como establecer el ancho definido al contenedor principal de 10000px, utilizar Javascript para cambiar de forma dinámica el ancho de la página en base al contenido, o utilizar la propiedad transform de CSS para rotar la página 90 grados, entre muchas otras. Nosotros decidimos utilizar Flexbox (Flexible Box Module) el cuál es definido como un modelo unidimensional de layout, y como un método que pueda ayudar a distribuir el espacio entre los elementos de una interfaz y mejorar las capacidades de alineación.
Flexbox nos permite, mediante la propiedad flex-direction, especificar si nuestra interfaz o contenedor actuará como fila o columna. Partiendo de esto, para obtener un contenedor con desplazamiento horizontal solo hay que establecer el modo columna, una altura máxima del contenedor y la propiedad flex-wrap como wrap para indicar que los elementos sigan agrupándose en columnas si se excede la altura del contenedor.
.horizontal-container {
display: flex;
height: 500px;
flex-direction: column;
flex-wrap: wrap;
align-content: flex-start;
}
Pero no todo son dispositivos móviles. Para que esté completa la transformación horizontal hace falta transformar también el evento “wheel” o “la ruedita del mouse” para que al dispararse el evento veamos un desplazamiento en nuestro contenedor. Con unas cuantas líneas de Javascript podemos escuchar por el evento y pasar de una dirección a otra.
const container = document.getElementById('scroll');
container.addEventListener('wheel', function(event) {
const delta = Math.max(-1, Math.min(1,(event.deltaY)));
container.scrollLeft += (delta * 25);
event.preventDefault();
});
Ahora si, hemos cambiado la orientación de nuestra página o sección con algunas líneas de CSS y Javascript, sin alterar el contenido de la página. Abajo les agrego ambas versiones para que vean el método en acción y puedan experimentar con la idea.
Desplazamiento vertical
[codepen_embed height=”281″ theme_id=”0″ slug_hash=”QxLYvx” default_tab=”result” user=”wafo”]See the Pen <a href=’https://codepen.io/wafo/pen/QxLYvx/’>QxLYvx</a> by Jose Luis Vega (<a href=’https://codepen.io/wafo’>@wafo</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
Desplazamiento horizontal
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”MXaLom” default_tab=”result” user=”wafo”]See the Pen <a href=’https://codepen.io/wafo/pen/MXaLom/’>MXaLom</a> by Jose Luis Vega (<a href=’https://codepen.io/wafo’>@wafo</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
