Un scroll que se ajusta en CSS

Un carrusel que aterriza en un elemento en vez de frenar entre dos.

.carousel {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 1rem;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
}

.carousel > * {
  flex: 0 0 min(80%, 22rem);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

html { scroll-behavior: smooth; scroll-padding-block-start: 4rem; }

Cómo funciona

1. scroll-snap-type va en el contenedor con scroll; scroll-snap-align, en cada elemento.
2. scroll-padding evita que un encabezado sticky tape el elemento ajustado.
3. overscroll-behavior: contain evita que la página siga el scroll cuando este termina.

Palabras clave y builtins usados aquí

• display
• flex
• gap
• rem

El intento, en números

Líneas

17

Caracteres a escribir

347

Tokens

74

Ritmo de tres estrellas

85 tpm

Al ritmo de tres estrellas de 85 tokens por minuto, este intento toma unos 52 segundos.

Escribe este fragmento

Paso 7 de 7 en Posicionamiento; paso 23 de 24 en Flexbox y grid.

← Anterior Siguiente →