¿Qué es CSS Scroll Snap?
CSS Scroll Snap es una funcionalidad que permite crear una experiencia de desplazamiento más controlada en elementos de una página web. Al definir puntos de ajuste (snap points), el contenido se detiene automáticamente en lugares específicos durante el desplazamiento, mejorando la experiencia de usuario (UX) en interfaces como carruseles, galerías de imágenes, o listas de contenido.
Propiedades Principales de CSS Scroll Snap
scroll-snap-type
La propiedad scroll-snap-type se aplica al contenedor y define el comportamiento de ajuste del desplazamiento. Esta propiedad acepta los siguientes valores:
• x, y o both: Indican en qué eje se aplicará el ajuste, si x, si y, o ambos.
• mandatory: Obliga al desplazamiento a ajustarse al punto más cercano.
• proximity: Permite que el desplazamiento se detenga en cualquier punto dentro del área de ajuste.
Ejemplo de uso:
.carousel {
scroll-snap-type: x mandatory;
}
scroll-snap-align
La propiedad scroll-snap-align se aplica a los elementos dentro del contenedor y define el punto donde se alineará el ajuste dentro del contenedor. Los valores posibles son:
- start: El ajuste se realiza al principio del contenedor.
- center: El ajuste se centra en el contenedor.
- end: El ajuste se realiza al final del contenedor.
.slide {
scroll-snap-align: center;
}
Cómo Implementar CSS Scroll Snap
Crear un Carrusel Horizontal
Supongamos que quieres crear un carrusel de imágenes donde cada imagen se desplace horizontalmente y se ajuste automáticamente al centro del contenedor.
Aquí está el HTML / CSS básico:
<div class="carousel">
<div class="slide"><img src="image1.jpg" alt="Imagen 1"></div>
<div class="slide"><img src="image2.jpg" alt="Imagen 2"></div>
<div class="slide"><img src="image3.jpg" alt="Imagen 3"></div>
</div>
.carousel {
display: flex;
overflow-x: scroll;
scroll-snap-type: x mandatory;
}
.slide {
flex: 0 0 100%;
scroll-snap-align: center;
width: 100%;
height: auto;
}
Este código hará que cada imagen se ajuste al centro del contenedor cuando el usuario desplace hacia los lados.
Crear un Desplazamiento Vertical
Si prefieres un desplazamiento vertical, solo necesitas modificar algunos estilos:
.carousel {
display: flex;
flex-direction: column;
overflow-y: scroll;
height: 100vh;
scroll-snap-type: y mandatory;
}
Ejemplos Prácticos de Scroll Snap
CSS Scroll Snap puede usarse en una variedad de escenarios, desde carruseles de imágenes hasta menús o listas de contenido. Aquí tienes un ejemplo más avanzado que utiliza una combinación de scroll-snap-type y scroll-snap-align para lograr un ajuste preciso tanto en desplazamientos horizontales como verticales.
<div class="carousel">
<div class="slide">Contenido 1</div>
<div class="slide">Contenido 2</div>
<div class="slide">Contenido 3</div>
</div>
.carousel {
display: flex;
overflow: auto;
scroll-snap-type: x mandatory;
scroll-snap-type: y proximity;
}
.slide {
scroll-snap-align: start;
}
Mejores prácticas y consejos
- Usa scroll-snap-type con moderación: Si bien es una herramienta poderosa, usar demasiados puntos de ajuste puede resultar en una experiencia de usuario menos fluida.
- Combina con JavaScript para una mayor personalización: Aunque CSS Scroll Snap es efectivo por sí solo, puedes mejorar su funcionalidad combinándolo con scripts que controlen el comportamiento del desplazamiento.
CSS Scroll Snap es una herramienta poderosa para crear experiencias de desplazamiento suaves y controladas. Ya sea que estés construyendo un carrusel, una presentación de diapositivas o cualquier diseño con desplazamiento, ahora puedes lograr efectos de desplazamiento perfectos sin necesidad de JavaScript.
En este artículo, solo hemos abordado las implementaciones más básicas. Hay muchas formas creativas de aprovechar CSS Scroll Snap. Aquí tienes algunos ejemplos para tu inspiración:
CSS-only Carousel
El carrusel del artículo es bastante básico. El siguiente ejemplo muestra cómo puedes agregar controles como botones y paginación, todo sin usar JavaScript:
Layout con CSS Grid aplicando scroll-snap en una columna
Este enfoque permite crear interfaces dinámicas donde cada columna de una cuadrícula ajusta su desplazamiento de forma independiente, creando una experiencia de usuario fluida y visualmente atractiva. Es ideal para diseños de blogs modernos, galerías de imágenes o cualquier disposición de contenido que requiera un desplazamiento controlado.