Volver a la página principal
viernes 27 septiembre 2024
27

Cómo controlar el desplazamiento con scroll-snap-type en CSS

¿Qué es scroll-snap-type y cómo funciona?

scroll-snap-type define el comportamiento de anclaje del scroll en un contenedor, determinando si el desplazamiento se ajustará en el eje horizontal, vertical o en ambos. Al activarlo junto con scroll-snap-align en los elementos internos, se logra que estos queden alineados automáticamente al terminar el desplazamiento.

Sintaxis básica: 

.contenedor {
  scroll-snap-type: y mandatory;
}

En este caso, el desplazamiento se ajusta en el eje vertical (y) y es obligatorio (mandatory), lo que significa que el scroll siempre se detendrá en el borde de los elementos definidos.

Tipos de valores para scroll-snap-type

  • Ejes de scroll:
  • x: Alinea los elementos en el eje horizontal.
  • y: Alinea los elementos en el eje vertical.
  • both: Alinea en ambos ejes.
  • Comportamiento:
  • mandatory: El scroll siempre se detendrá en los puntos de anclaje definidos.
  • proximity: El scroll se ajustará si el usuario se desplaza cerca de los puntos de anclaje, pero no es obligatorio.

Ejemplo de uso en carrusel horizontal: 

.carrusel {
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
}

.carrusel-item {
  scroll-snap-align: start;
  flex: 0 0 80%; /* Cada elemento ocupa el 80% del ancho */
}

En este caso, el carrusel se desplaza horizontalmente y cada ítem se alinea al inicio (start) cuando el desplazamiento se detiene.

Ejemplos de uso con scroll-snap-type

1. Scroll vertical en secciones: 

.secciones {
     height: 100vh;
     scroll-snap-type: y mandatory;
     overflow-y: scroll;
   }

   .seccion {
     height: 100vh;
     scroll-snap-align: center;
   }

Aquí, cada sección ocupa toda la altura de la pantalla y se ancla en el centro cuando se desplaza.

2. Galería de imágenes horizontal: 

.galeria {
     display: flex;
     overflow-x: auto;
     scroll-snap-type: x proximity;
   }

   .imagen {
     width: 100vw;
     scroll-snap-align: end;
   }

Los elementos de la galería se alinean al final (end) si el desplazamiento está cerca del borde.

Referencia oficial

Para más información, visita la documentación oficial de MDN sobre scroll-snap-type.

Etiquetas:
css
Compartir:
Creado por:
Author photo

Jorge García

Fullstack developer