Desplazamiento horizontal en páginas web
Desplazamiento horizontal en páginas web — RO Solutions Blog
Hoy en día estamos tan acostumbrados a consumir el contenido web 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.
Desplazamiento horizontal, ¿Cómo solucionarlo?
Nosotros decidimos utilizar Flexbox (Flexible Box Module) el cuál es definido como un modelo unidimensional de layout. Flexbox nos permite, mediante la propiedad flex-direction, especificar si nuestra interfaz o contenedor actuará como fila o columna. 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:
.horizontal-container {
display: flex;
height: 500px;
flex-direction: column;
flex-wrap: wrap;
align-content: flex-start;
}
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:
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.