Scroll snap

.container {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
}
.item {
  scroll-snap-align: start;
}

.container

• scroll-snap-type: x mandatory;
  • Activa el comportamiento de Scroll Snap en el contenedor.
  • x: Indica que el desplazamiento controlado ocurre en el eje horizontal.
  • mandatory: Obliga al desplazamiento a detenerse en los puntos definidos por los elementos hijos (no permite detenerse entre ellos). Alternativamente, podrías usar proximity, que es más flexible y permite detenerse cerca de los puntos de alineación.
• overflow-x: scroll;
  • Habilita el desplazamiento horizontal en el contenedor si su contenido supera el ancho disponible.

.item

• scroll-snap-align: start;
  • Define cómo se alinean los elementos hijos (.item) dentro del contenedor cuando se detiene el desplazamiento.
  • start: Alinea cada elemento al inicio del contenedor (es decir, su borde izquierdo coincidirá con el borde izquierdo del contenedor).

Cómo Funciona

1. Cuando haces scroll horizontal en el contenedor .container, el navegador se asegura de que los elementos .item se alineen automáticamente según las reglas definidas por scroll-snap-align.
2. En este caso, cada elemento hijo (.item) se alinea con el borde izquierdo del contenedor al detenerse.

Ventajas y Usos Prácticos

1. Experiencia de Usuario Mejorada:
   • Scroll Snap crea una experiencia más fluida y controlada, especialmente útil para carruseles o galerías donde los usuarios deben visualizar un elemento a la vez.
2. Compatibilidad con Interfaces Táctiles:
   • Es ideal para dispositivos móviles o pantallas táctiles, ya que permite un desplazamiento intuitivo y preciso.
3. Simplicidad:
   • Scroll Snap elimina la necesidad de usar JavaScript para implementar comportamientos similares (como carruseles).

Ejemplo Práctico

HTML:

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

CSS:

.container {
  display: flex; /* Para organizar los elementos en fila */
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
}

.item {
  flex: 0 0 auto; /* Asegura que los elementos no se reduzcan ni crezcan */
  scroll-snap-align: start;
  width: 300px; /* Ancho fijo para cada elemento */
  height: 200px;
  margin-right: 1rem; /* Espaciado entre elementos */
  background-color: lightblue;
}

Comportamiento Visual

• Al hacer scroll horizontal en .container, cada .item se alineará automáticamente con el borde izquierdo del contenedor.
• Si estás en un dispositivo táctil, deslizar hacia la derecha o izquierda hará que el desplazamiento «salte» al siguiente elemento.

Conclusión

Este enfoque es perfecto para implementar carruseles responsivos, galerías de imágenes o cualquier diseño donde quieras controlar cómo los usuarios interactúan con contenido desplazable. Además, es una solución nativa de CSS, lo que significa que no requiere JavaScript adicional para funcionar.