Imagine desplazarse hacia abajo con la rueda del mouse o el panel táctil y que su página se desplace horizontalmente. ¿No es genial? En este artículo, veremos cómo podría usar Javascript vainilla para crear un efecto tan interesante.
Creación de contenido desplazable
Para comenzar, escribiremos algo de HTML para establecer algún contenido que requiera un desplazamiento horizontal.
<main>
<section>
<h1>Beep</h1>
</section>
<section>
<h1>Boop</h1>
</section>
<section>
<h1>Boooom</h1>
</section>
</main>
El elemento principal será el contenedor de desplazamiento. Va a ser el elemento al que está vinculada una barra de desplazamiento siempre que haya contenido que la desborde. Tal como está ahora, no hay suficiente contenido para producir un desbordamiento. Así que arreglemos esto.
Asegurarse de que el contenido se desborde
Colocaremos cada sección alineada una al lado de la otra para que el contenido se desborde horizontalmente. Estamos tratando de crear algo como esto, donde los elementos están desbordando el contenedor y, por lo tanto, podemos crear una barra de desplazamiento horizontal para ellos. Puedes tener tantas secciones como quieras.
A los efectos de esta demostración, haremos que los elementos aparezcan en pantalla completa. Para hacer esto, usaremos unidades de ventana gráfica como vh y vw para establecer las propiedades min-width y min-height para escalar ambos bordes de la pantalla. Luego, podemos centrar el contenido usando “justify-content” y “align-items”.
Usamos display:flex haciendo que el elemento principal sea el contenedor flexible. También ocultaremos la barra de desplazamiento para esta demostración usando overflow-x: hidden. No hay necesidad de esto, pero lo haremos para nuestra demostración. Si decide no ocultarlo, asegúrese de cambiarlo por overflow-x: scroll.
main {
overflow-x: hidden;
display: flex;
}h1 {
margin: 0;
}
section {
min-width: 50vw;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 4ch;
}
Y por qué no, también le daremos a cada sección un fondo diferente:
section:nth-child(even) {
background-color: teal;
color: white;
}Aquí es donde viene la parte divertida. Ahora nos suscribiremos al evento de la rueda del mouse adjuntando un detector de eventos a nuestro elemento desplazable, que en este caso es el elemento con la etiqueta principal.
¿Qué significa esto? Significa que ahora podremos recopilar información a través de JavaScript sobre el evento de desplazamiento, que es exactamente lo que necesitamos.
const scrollContainer = document.querySelector('main');scrollContainer.addEventListener('wheel', (evt) => {
});
Necesitamos saber la dirección hacia la que se desplaza el usuario y la cantidad de desplazamiento. ¿Entonces, Cómo lo hacemos?
Usaremos la propiedad deltaY del objeto de evento que obtenemos en el parámetro (evt).
El evento de rueda tiene 4 propiedades y deltaY representa la cantidad de desplazamiento vertical. Así que usaremos exactamente ese mismo valor para desplazarnos exactamente la misma cantidad pero esta vez horizontalmente.
Actualizaremos la propiedad scrollLeft del contenedor desplazable (principal) para que se desplace horizontalmente.
const scrollContainer = document.querySelector("main");
scrollContainer.addEventListener("wheel", (evt) => {
evt.preventDefault();
scrollContainer.scrollLeft += evt.deltaY;
});
La propiedad deltaY puede ser positiva o negativa. Cuando es positivo, significa que el usuario se está desplazando hacia arriba y cuando es negativo, el usuario se está desplazando hacia abajo. Entonces, en nuestro caso, cuando se desplazan hacia arriba, queremos desplazarnos hacia la izquierda y cuando se desplazan hacia abajo, queremos desplazarnos hacia la derecha.
La propiedad scrollLeft funciona exactamente con la misma idea en mente. Cuando se aplica a un elemento desplazable, un valor negativo significa que desplazaremos el elemento desplazable hacia la izquierda y uno positivo significa que lo haremos en la dirección opuesta, hacia la derecha. Así que básicamente asignamos el valor deltaY a la propiedad scrollLeft y ¡estamos listos para comenzar!
Solo una nota. No confunda el evento de la rueda con el evento de la rueda del ratón, el último de los cuales ha quedado obsoleto.
Eche un vistazo al siguiente codepen, hágalo bifurcar y juegue con el código para ver si puede crear un diseño ordenado con desplazamiento horizontal:
Quizás se esté preguntando si puede aplicar la misma técnica con el contenido antes y después del elemento desplazable horizontal. Así que el elemento de desplazamiento horizontal pegar en la ventana gráfica hasta que terminemos de desplazarnos horizontalmente.
La respuesta es SÍ, se puede. De esta manera, el el desplazamiento vertical parecerá detenerse mientras seguimos desplazándonos horizontalmente. Una vez que hayamos terminado de desplazarnos se reanudará el desplazamiento vertical.
El truco es crear un contenedor pegajoso con la altura del ancho desplazable horizontal. Esto servirá como marcador de posición. Se mantendrá en la parte superior mientras la página desplaza el marcador de posición verticalmente sin que el usuario se dé cuenta, ya que tenemos un elemento fijo que ocupa toda la ventana gráfica.
Luego usaremos ese pergamino para aplicarlo en nuestro elemento fijo.
Hay un poco más de JavaScript involucrado aquí. Aquí está el ejemplo completo:
¿Te encanta explorar las diferentes formas en que puedes hacer que los usuarios interactúen con tu página? Entonces tendrá que probar fullPage, es una de esas bibliotecas que viene con una caja completa de trucos ingeniosos y formas de implementar efectos de desplazamiento comúnmente implementados.
Ya sea que se trate de desplazamiento instantáneo tanto horizontal como verticalmente, activaciones ordenadas de animaciones o cambios de estilos condicionales, lo tiene cubierto en todos los frentes.
Su navegador no soporta la etiqueta de vídeo.
Demostración de desplazamiento horizontal
Con compatibilidad entre navegadores (desde IE11), excelente documentación y código bien probado, viene con soporte para sus marcos front-end favoritos como React, Vue o Angular y creadores web populares de WordPress como Gutenberg o Elementor.
Artículos relacionados
