CSS Snap Scroll, cuando se usa de manera efectiva, puede ayudar a mejorar la experiencia de desplazamiento del usuario en sitios web creados con diferentes secciones de pantalla completa o a los que se accede a través de dispositivos táctiles. Y por supuesto, ¡también se puede aplicar en horizontal! Si desea un sitio web horizontal de pantalla completa, ¡esto se puede hacer con CSS snap scroll! Te explicaremos en este artículo cómo hacerlo.
CSS Snap Scrolling es simplemente una forma de forzar el desplazamiento para que se comporte de una manera muy específica o precisa: una vez que un usuario ha terminado de desplazarse, mediante el desplazamiento rápido puede asegurarse de que la barra de desplazamiento se detenga en el lugar que desea que se detenga. Este desplazamiento restrictivo es muy efectivo en dispositivos táctiles para asegurarse de que la barra de desplazamiento termine en el lugar correcto.
En primer lugar, necesitamos un elemento contenedor que envuelva las secciones que atraerán el pergamino. Este elemento se denomina “contenedor de desplazamiento” en el contexto de CSS Snap Scroll. En este tutorial, utilizaremos un elemento principal.
Dentro, añadimos nuestras secciones:
<main>
<section>
<h1>Never gonna give you up</h1>
</section>
<section>
<h1>Never gonna let you down</h1>
</section>
<section>
<h1>Never gonna run around and desert you</h1>
</section>
</main>
A continuación, implementaremos el efecto configurando la altura de los elementos html y body al 100%. Esto es importante porque este tutorial tiene como objetivo hacer que todos los elementos de la sección se escalen a la altura máxima. La unidad de porcentaje se basa en las dimensiones de los padres, por lo que el cuerpo y la parte principal deben tener una altura: 100 % si queremos que las secciones se expandan en toda su altura.
html,
body {
font-family: sans-serif;
margin: 0;
height: 100%;
}
Para convertir un elemento contenedor ordinario en un “contenedor de desplazamiento”, establecemos la propiedad scroll-snap-type en un par de valores que siguen la sintaxis
Este tutorial se centra en cómo crear un desplazamiento horizontal, por lo que la dirección de desplazamiento sería a lo largo del eje x. Para que el efecto sea más fácil de detectar en todo momento, usaremos obligatorio.
También usamos CSS3 Flexbox para alinear cada sección en la principal horizontalmente configurando la pantalla para que se flexione.
main {
height: 100%;
display: flex;
overflow-y: hidden;
overflow-x: auto;
scroll-snap-type: x mandatory;
}Finalmente, la siguiente propiedad específica de desplazamiento de ajuste de CSS que debe establecerse es scroll-snap-align. Esta propiedad describe dónde debe tener lugar exactamente el complemento en relación con la dirección en la que se produce el desplazamiento. Puede establecerlo en uno de los 3 valores: inicio, centro y final. Cuando se configura para comenzar (mientras se desplaza horizontalmente), el punto se encuentra en el borde superior izquierdo de la ventana gráfica.
El resto de estilos son meramente estéticos. Usamos CSS3 Flexbox para centrar las etiquetas h1 horizontal y verticalmente, nos aseguramos de que la sección ocupe todo el ancho y alto, y establecemos el tamaño de fuente para las etiquetas h1.
El selector nth-child() también se usa para diseñar cada sección impar, este selector puede ser útil si sus elementos tienen algún estilo que se aplica de acuerdo con un patrón específico.
section {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
min-width: 100vw;
font-size: 3.5ch;
scroll-snap-align: start;
}section*:nth-child*(odd) {
background: black;
color: white;
}
Por supuesto, siéntase libre de mejorar la reutilización de estos estilos simplemente extrayendo las partes importantes de los estilos escritos anteriormente de esta manera:
.snap-scroll-horizontal {
overflow-y: hidden;
overflow-x: auto;
scroll-snap-type: x mandatory;
}
.snap-child-at-start {
scroll-snap-align: start;
}
Luego, simplemente agregue las clases a los elementos de manera adecuada junto con cualquier otro estilo.
Si está familiarizado con las unidades de ventana gráfica como vh o vw, es posible que no sepa por qué no establecimos la altura en 100vh antes. El motivo es que las unidades de ventana gráfica no se han creado teniendo en cuenta la barra de desplazamiento. De forma predeterminada, la ventana gráfica incluye la barra de desplazamiento.
Para evitar esto, puede rociar un poco de Javascript para obtener el ancho de la barra de desplazamiento y luego ponerlo a disposición de CSS a través de la variable _calculateScrollbarWidth. Esta variable CSS se vuelve a calcular cada vez que el DOM se carga, se cambia de tamaño y cuando toda la página se carga por completo.
Para obtener el ancho de la barra de desplazamiento, restamos el ancho del documento sin la barra de desplazamiento del ancho de la página con la barra de desplazamiento.
function _calculateScrollbarWidth() {
document.documentElement.style.setProperty(
'--scrollbar-width',
window.innerWidth - document.documentElement.clientWidth + 'px'
);
}document.addEventListener('DOMContentLoaded', _calculateScrollbarWidth, false);
window.addEventListener('load', _calculateScrollbarWidth);
window.addEventListener('resize', _calculateScrollbarWidth, false);
Luego, puede usar fácilmente la variable CSS disponible para establecer la altura de la sección a través de vh.
section {
height: calc(100vh - var(--scrollbar-width));
}Y aquí está nuestro codepen con nuestro sitio web de desplazamiento rápido horizontal:
Conclusión
Si ahora es un fanático del desplazamiento instantáneo (¡como lo somos nosotros!), entonces le encantará saber que todos los problemas engorrosos que surgen con la compatibilidad entre navegadores y dispositivos se manejan por usted a través de un Javascript prolijo, bien documentado y probado. biblioteca llamada fullPage. Especialmente si desea una solución de escritorio que se desplace horizontalmente mientras se desplaza verticalmente con el mouse/panel táctil como se mencionó anteriormente.
De hecho, una vez que comiences a jugar con este tipo de diseño, rápidamente te darás cuenta de que querrás hacer muchas más cosas. Cosas como activar eventos para activar animaciones, usar estilos condicionales basados en las secciones activas o incluso cambiar la URL según la sección que esté visible. fullPage.js le proporciona todo esto (y mucho más) listo para usar, además del desplazamiento rápido horizontal. También viene con soporte para sus marcos front-end favoritos como React, Vue o Angular y creadores web de WordPress como Elementor o Gutenburg. ¡Así que es totalmente imprescindible si te gusta el desplazamiento rápido!
