El Scroll Snap, desplazamiento con ajuste o con bloqueo en español, es una propiedad de CSS que nos permite controlar el desplazamiento o scroll en contenedores para que sea suave. Esta característica es particularmente útil en sitios web que necesitan una navegación fluida y organizada entre secciones de contenido.
Anteriormente, conseguir este tipo de comportamiento requería el uso de JavaScript. Sin embargo, gracias a Scroll Snap de CSS, ahora podemos implementarlo con solo unas pocas líneas de código gracias a la propiedad scroll-snap-type.
Esta propiedad nos permite definir puntos de «anclaje» a los que el desplazamiento se detendrá de forma automática al hacer scroll. Esto es muy interesante en sitios web que presentan una disposición en bloques horizontales o verticales, facilitando que los usuarios naveguen de manera fluida y directa entre sus secciones.
1. ¿Para qué sirve el Scroll Snap en CSS?
El desplazamiento o scroll es la acción de mover el contenido de una página web hacia arriba o hacia abajo para ver áreas no visibles en la pantalla. En un desplazamiento convencional, el usuario puede deslizar el contenido de forma continua, y este se mueve en función de la dirección y la intensidad del deslizamiento.
Sin embargo, con el Scroll Snap de CSS, podemos modificar este comportamiento para que el desplazamiento se alinee con ciertos puntos de anclaje dentro del contenedor. Por ejemplo, al desplazar hacia abajo en una página web, en lugar de permitir un movimiento fluido, el desplazamiento puede detenerse automáticamente en ciertos puntos predefinidos, como el inicio de cada sección o bloque de contenido.
2. Implementación de Scroll Snap en CSS
Para implementar Scroll Snap en CSS, aplicaremos la propiedad scroll-snap-type al contenedor correspondiente con la siguiente sintaxis.
Sintaxis:
.contenedor-scroll {
scroll-snap-type: [x | y | block | inline] [mandatory | proximity];
}
.seccion {
scroll-snap-align: [start | center | end | none];
}
- La propiedad
scroll-snap-typeespecifica cómo se debe comportar el desplazamiento dentro del contenedor. Puede definir el tipo de desplazamiento en los ejes horizontal (x) o vertical (y), así como también en bloque (block) o en línea (inline). Además, determina si el desplazamiento debe detenerse obligatoriamente en los puntos de anclaje especificados (mandatory) o si puede detenerse en el punto más cercano (proximity). - Un aspecto importante a tener en cuenta es la propiedad
scroll-snap-align, que se aplica a los elementos hijos del contenedor. Esta propiedad determina cómo se alineará cada elemento con respecto al punto de anclaje. Los valores comunes parascroll-snap-alignsonstart,end,center,none, etc. Por ejemplo,scroll-snap-align: start;alinea el inicio del elemento con el punto de anclaje.
Ejemplo:
Supongamos que tenemos un contenedor que contiene varias secciones y queremos aplicar Scroll Snap para que el desplazamiento se detenga en cada sección. Para ello, creamos un contenedor con la clase «contenedor-scroll» que contiene varias secciones con la clase «seccion». Aplicamos Scroll Snap al contenedor verticalmente (scroll-snap-type: y mandatory), lo que hace que el desplazamiento se detenga obligatoriamente en cada sección. Además, establecemos scroll-snap-align: start en cada sección para alinear el inicio de cada una con el punto de anclaje.
HTML:
<div class="contenedor-scroll">
<div class="seccion">Sección 1</div>
<div class="seccion">Sección 2</div>
<div class="seccion">Sección 3</div>
<div class="seccion">Sección 4</div>
</div>
CSS:
.contenedor-scroll {
height: 300px; /* Altura del contenedor */
overflow-y: scroll; /* Habilitar el desplazamiento vertical */
scroll-snap-type: y mandatory; /* Desplazamiento vertical obligatorio */
}
.seccion {
height: 300px; /* Altura de cada sección */
scroll-snap-align: start; /* Alinear el inicio de cada sección con el punto de anclaje */
}
Ejemplo en CodePen:
3. Ejemplos prácticos de Scroll Snap
A continuación, veremos algunos ejemplos de cómo podemos usar Scroll Snap para mejorar la experiencia de usuario en diferentes situaciones.
3.1. Secciones de contenido que ocupan el 100% del alto
Con Scroll Snap, podemos crear secciones de contenido que ocupen todo el alto de la pantalla y se desplacen de manera suave. Esto es útil para presentaciones de una sola página donde cada sección se alineará perfectamente y los usuarios podrán navegar de manera intuitiva por el contenido.
CSS:
body, html {
height: 100%;
}
.scroll-container {
width: 100%;
height: 100%;
overflow-y: auto;
scroll-snap-type: y mandatory; /* Activamos el desplazamiento por defecto */
}
.scroll-item {
height: 100vh; /* Ocupar toda la altura de la ventana */
scroll-snap-align: start; /* Alineamos los elementos al inicio de la ventana de visualización */
display: flex;
justify-content: center;
align-items: center;
}
Ejemplo en CodePen:
3.2. Galerías de productos en contenedores horizontales
En tiendas online, las galerías de productos pueden contar con Scroll Snap para permitir a los usuarios explorar los diferentes productos de forma horizontal. Cada producto se muestra en su propia tarjeta o card y el Scroll Snap asegura que cada tarjeta esté alineada perfectamente cuando se hace scroll horizontal, facilitando la comparación entre productos.
CSS:
.product-gallery {
display: flex;
overflow-x: scroll;
scroll-snap-type: x mandatory;
}
.product-card {
flex: 0 0 auto;
width: 200px;
margin-right: 10px;
scroll-snap-align: start;
}
Ejemplo en CodePen:
3.3. Galería vertical con texto descriptivo
En esta ocasión, vamos a crear una galería de imágenes con texto dispuesto de forma vertical. Esto puede ser útil cuando queremos mostrar imágenes con descripciones o detalles adicionales debajo de cada imagen. Cada imagen está alineada al inicio del contenedor gracias a la propiedad scroll-snap-align. Al hacer scroll, nos detenemos en cada elemento. Esto puede ser útil para presentaciones de productos, portafolios o cualquier otro tipo de contenido visual que queramos destacar.
CSS:
.gallery {
height: 100vh;
overflow-y: scroll;
scroll-snap-type: y mandatory;
}
.image {
scroll-snap-align: start; /* Hace que cada imagen se alinee al inicio del contenedor */
}
Ejemplo en CodePen:
4. Compatibilidad de Scroll Snap con los navegadores web
Antes de implementar Scroll Snap en tu proyecto, es importante verificar su compatibilidad con los navegadores web más utilizados. Para ello, podemos consultar la compatibilidad de Scroll Snap con los navegadores utilizando herramientas como Can I Use. En general, la propiedad cuenta con un amplio soporte en la mayoría de los navegadores modernos, lo que nos ofrece la confianza de implementarla sin problemas en la mayoría de los casos.
Como has visto, el Scroll Snap en CSS te permite controlar el desplazamiento, o scroll horizontal y vertical, de tu sitio web. Con esta funcionalidad, puedes crear experiencias de desplazamiento suaves para mejorar la navegación entre diferente tipo de contenido.