scroll-snap-type et scroll-snap-align
Créez des expériences de défilement avec carrousel et pagination grâce aux propriétés CSS d’accrochage du défilement.
scroll-snap-type et scroll-snap-align est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.
Qu’est-ce que l’accrochage du défilement CSS ?
L’accrochage du défilement CSS permet aux conteneurs défilables de « s’aligner » sur des positions précises après le défilement, afin de créer des comportements de pagination et de carrousel contrôlés sans JavaScript.
scroll-snap-type sur le conteneur
Activez l’accrochage sur le conteneur défilable :
<div class="carousel">
<div class="item">1</div><div class="item">2</div><div class="item">3</div>
</div>Valeurs de scroll-snap-type
Deux parties :
- Axe :
x,youboth - Degré de contrainte :
mandatory(l’accrochage est toujours effectué) ouproximity(l’accrochage est effectué lorsque la position est proche d’un point d’accrochage)
<div class="paged">Paged container</div>
<div class="freeform">Freeform container</div>scroll-snap-align sur les éléments
Définissez l’endroit où chaque élément enfant s’aligne dans le conteneur :
<div class="carousel-demo">
<div class="carousel-item">1</div><div class="carousel-item">2</div>
</div>Accrochage des pages en plein écran
Une mise en page de sections verticales en plein écran avec pagination :
<div class="sections">
<div class="section">Section 1</div><div class="section">Section 2</div>
</div>Accrochage d’un carrousel horizontal
Un carrousel horizontal de cartes avec accrochage :
<div class="carousel">
<div class="card">Card 1</div><div class="card">Card 2</div><div class="card">Card 3</div>
</div>scroll-snap-stop
scroll-snap-stop: always empêche le défilement rapide d’ignorer des points d’accrochage. L’utilisateur ne peut pas avancer de plus d’un élément par geste de défilement.
<div class="slider">
<div class="slide">1</div><div class="slide">2</div>
</div>scroll-snap-margin et scroll-padding
Décalez la position d’accrochage sur les éléments (scroll-margin) ou sur le conteneur (scroll-padding) :
<div class="carousel">Carousel container</div>overscroll-behavior
overscroll-behavior: contain empêche le chaînage du défilement : lorsque le conteneur atteint sa limite de défilement, la page ne défile pas à son tour.
<div class="modal-body">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>Considérations d’accessibilité
Les carrousels avec accrochage doivent également rester accessibles au clavier. Les touches fléchées doivent permettre de passer d’un point d’accrochage à l’autre. Ajoutez des rôles et des libellés de carrousel ARIA. Le défilement programmatique via JavaScript doit respecter les mêmes points d’accrochage.
Carrousels CSS ou JS
L’accrochage du défilement CSS répond à la plupart des besoins élémentaires des carrousels sans JavaScript : alignement automatique, masquage de la barre de défilement et alignement des espacements internes. Utilisez une bibliothèque JS lorsque vous avez besoin d’indicateurs sous forme de points, de boutons précédent/suivant avec des transitions animées ou d’une gestion complexe de l’accessibilité.
Vérification rapide
Quelle valeur de scroll-snap-type garantit que le conteneur s’arrête toujours exactement sur un point d’accrochage, jamais entre deux points ?
Récapitulatif
L’accrochage du défilement CSS crée des comportements de pagination et de carrousel. Définissez scroll-snap-type: x mandatory sur le conteneur et scroll-snap-align: start sur les éléments. Utilisez scroll-snap-stop: always pour empêcher le défilement d’ignorer des points d’accrochage. Combinez cette propriété avec overscroll-behavior: contain pour empêcher le chaînage du défilement. Masquez les barres de défilement avec scrollbar-width: none pour obtenir un rendu épuré.
Questions Fréquemment Posées
La leçon « scroll-snap-type et scroll-snap-align » est-elle gratuite ?
Oui — le texte complet de « scroll-snap-type et scroll-snap-align » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « scroll-snap-type et scroll-snap-align » ?
Créez des expériences de défilement avec carrousel et pagination grâce aux propriétés CSS d’accrochage du défilement. Tu pratiques CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer CSS Academy ?
Aucune expérience préalable n'est requise. CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.
Combien de temps prend la leçon « scroll-snap-type et scroll-snap-align » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon CSS Academy ?
Oui. Chaque leçon CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- overflow : hidden, scroll, auto, clip
- scroll-behavior : smooth
- scroll-snap-type et scroll-snap-align
- Personnalisation de la barre de défilement avec ::-webkit-scrollbar