Scroll Snap

Definition

Propriétés CSS qui forcent le scroll à s'arrêter sur des points précis. Le conteneur définit scroll-snap-type et les enfants définissent scroll-snap-align.

Analogie

Comme un carrousel de diapositives qui clique en place sur chaque slide au lieu de s'arrêter n'importe où.

Exemple de code

.carousel {
  display: flex; overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 1rem;
}
.slide {
  scroll-snap-align: start;
  flex: 0 0 100%;
}

Cas d'usage

Créer des carrousels, galeries horizontales ou sections plein écran avec accrochage natif sans JS.

Anti-pattern

Termes lies