Apprends Scroll Snap

Les bases de Scroll Snap

CSS Scroll Snap te permet de contrôler où un conteneur de défilement s'arrête après que l'utilisateur a fini de défiler. Au lieu de s'arrêter à une position arbitraire, le conteneur s'accroche à des points prédéfinis, créant une expérience soignée, semblable à une application.

Deux propriétés fonctionnent ensemble :

Sur le conteneur de défilement :

css

.scroller {
  scroll-snap-type: x mandatory;
}

La première valeur (x, y, ou both) définit l'axe de défilement.
La deuxième valeur contrôle la rigueur de l'accrochage :
- mandatory — Le navigateur doit s'accrocher à un point d'ancrage après le défilement. L'utilisateur ne peut pas s'arrêter entre les points d'ancrage.
- proximity — Le navigateur s'accroche uniquement si la position de défilement est proche d'un point d'ancrage. Permet un défilement libre autrement.

Sur chaque élément enfant :

css

.slide {
  scroll-snap-align: start;
}

Valeurs : start, center, end, ou none. Cela détermine quel bord de l'élément s'aligne avec le port d'ancrage du conteneur.

Galerie à défilement horizontal

html

<style>
  .gallery {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 16px;
    padding: 16px;
    background: #0f172a;
  }

  .gallery::-webkit-scrollbar {
    height: 8px;
  }

  .gallery::-webkit-scrollbar-thumb {
    background: #6366f1;
    border-radius: 4px;
  }

  .slide {
    flex: 0 0 280px;
    height: 180px;
    scroll-snap-align: center;
    background: #1e293b;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    font-weight: bold;
  }
</style>

<div class="gallery">
  <div class="slide">1</div>
  <div class="slide">2</div>
  <div class="slide">3</div>
  <div class="slide">4</div>
  <div class="slide">5</div>
</div>

Scroll Padding et accrochage vertical

La propriété scroll-padding ajoute un décalage au point d'ancrage, ce qui est utile lorsque tu as un en-tête fixe ou que tu veux un espace visuel respirant :

css

.scroller {
  scroll-snap-type: y mandatory;
  scroll-padding-top: 80px; /* tient compte d'un en-tête fixe */
}

Les sections verticales pleine page sont un autre motif populaire de scroll snap :

css

.page-scroller {
  height: 100vh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
}

.section {
  height: 100vh;
  scroll-snap-align: start;
}

Chaque section prend toute la hauteur de la fenêtre d'affichage, et scroll snap garantit que l'utilisateur s'arrête toujours parfaitement sur une limite de section.

Bonnes pratiques :

Utilise mandatory pour les carrousels et les sections pleine page où les vues partielles semblent cassées.
Utilise proximity pour le contenu long où l'utilisateur peut avoir besoin de défiler librement.
Assure-toi toujours que le contenu accroché est accessible via la navigation au clavier.
Teste le comportement de scroll snap sur les appareils tactiles et à souris.

Quelle est la différence entre scroll-snap-type: x mandatory et scroll-snap-type: x proximity ?

Scroll Snap

Les bases de Scroll Snap

Galerie à défilement horizontal

Scroll Padding et accrochage vertical

Prêt à pratiquer ?