CSS scroll snap : carrousels et sections pleine page
Guide CSS scroll snap
CSS scroll snap : carrousels, sections pleine page et bac à sable en direct
Testez chaque valeur de scroll-snap-type, scroll-snap-align et scroll-snap-stop dans une zone de défilement en direct, puis copiez un carrousel 100 % CSS et des sections pleine page qui restent accessibles.
Le scroll snap fait s'arrêter une zone de défilement sur des enfants choisis plutôt que n'importe où. Placez scroll-snap-type: x mandatory (ou y, ou proximity) sur le conteneur de défilement, puis scroll-snap-align: start, center ou end sur chaque enfant. Ajoutez scroll-padding pour les en-têtes fixes et scroll-snap-stop: always pour s'arrêter sur chaque élément.
Les propriétés de scroll snap en un coup d'œil
Propriété
Appliquée sur
Valeurs
Conteneur de défilement
none, x, y, block, inline, both + mandatory ou proximity
Chaque enfant
none, start, center, end (une ou deux valeurs)
Chaque enfant
normal (peut être dépassé), always (arrêt obligatoire)
Conteneur de défilement
Retrait en longueur ou pourcentage, comme padding
Chaque enfant
Marge en longueur autour de la zone d'accroche
Le scroll snap nécessitait autrefois une bibliothèque de carrousel. Aujourd'hui, quelques lignes de CSS suffisent pour des cartes à faire glisser, une galerie paginée ou des sections plein écran, avec le défilement inertiel et la prise en charge du clavier gérés par le navigateur. Utilisez le bac à sable pour sentir la différence entre chaque valeur avant de copier du code.
Choisissez un axe et un niveau de rigueur pour le conteneur dans le bac à sable.
Choisissez l'alignement de chaque diapositive et si le défilement doit s'arrêter sur chacune.
Faites défiler l'aperçu avec un trackpad, une molette, le tactile ou les flèches du clavier après avoir cliqué dedans.
Copiez le CSS généré, ou prenez l'un des modèles complets plus bas.
Quand un axe est indiqué sans mot-clé de rigueur, proximity est utilisé.
Préférez proximity pour les contenus longs : mandatory peut piéger les lecteurs quand un enfant est plus haut que le conteneur.
Rendez la zone de défilement focalisable avec tabindex="0" et un nom accessible, pour que les utilisateurs du clavier puissent la faire défiler avec les flèches.
L'accroche fonctionne avec scrollIntoView() et les liens d'ancre, donc de simples boutons suivant et précédent peuvent piloter un carrousel.
Questions fréquentes
Quelle est la différence entre mandatory et proximity ?
Avec mandatory, le conteneur se pose toujours sur une position d'accroche une fois le défilement terminé. Avec proximity, il ne s'accroche que si le défilement s'arrête près d'une position, ce qui laisse les gens libres de lire entre les deux. proximity est la valeur par défaut quand vous n'écrivez que l'axe.
Pourquoi le scroll snap ne fonctionne-t-il pas ?
Les causes habituelles : scroll-snap-type est sur les enfants au lieu du parent qui défile, le parent ne déborde pas réellement (définissez overflow-x: auto et une taille fixe), ou les enfants n'ont pas de scroll-snap-align. Pour une accroche au niveau de la page, le conteneur est html, pas body.
Comment éviter qu'un en-tête fixe couvre les sections accrochées ?
Définissez scroll-padding-top sur le conteneur de défilement à la hauteur de l'en-tête, par exemple html { scroll-padding-top: 64px; }. Les sections accrochées et les sauts d'ancre s'arrêtent alors sous l'en-tête au lieu de passer dessous.
Peut-on créer un carrousel sans JavaScript ?
Oui pour le glissement et le défilement : une rangée flex avec overflow-x: auto et une accroche x mandatory forme un carrousel fonctionnel. Les points indiquant la diapositive actuelle, la lecture automatique et le bouclage nécessitent encore un peu de script.
Le CSS scroll snap est-il pris en charge partout ?
scroll-snap-type est Baseline largement disponible depuis 2022 dans Chrome, Edge, Firefox et Safari, et scroll-snap-stop depuis juillet 2022. Vous pouvez l'utiliser sans solution de repli : les navigateurs qui ne le gèrent pas défilent simplement librement.
Des carrousels vraiment utilisables
Laissez dépasser la carte suivante en rendant chaque diapositive plus étroite que le conteneur, par exemple flex: 0 0 85%. Le bord visible indique qu'il reste du contenu à faire glisser, ce que ne fait pas une diapositive parfaitement ajustée.
Donnez un libellé à la zone de défilement, comme aria-label="Customer photos", et gardez les diapositives sous forme de liste. Ne masquez pas les diapositives hors écran aux lecteurs d'écran, et ne lancez jamais de lecture automatique sans commande de pause.
Des sections pleine page sans piège
L'accroche pleine hauteur impressionne en démo et agace les lecteurs quand une section contient plus de texte que l'écran, car l'accroche mandatory les fait sans cesse sauter au-delà. Utilisez proximity pour les sections de page, ou assurez-vous que chaque section tient vraiment sur un écran de téléphone.
Respectez le mouvement réduit en désactivant scroll-behavior: smooth dans une requête prefers-reduced-motion: reduce. L'accroche elle-même peut rester, puisqu'elle ne déplace que de la distance demandée par le lecteur.
Carrousel de cartes 100 % CSS
Carrousel horizontal avec la carte suivante qui dépasse
Faites glisser, défilez latéralement ou cliquez dedans et utilisez les flèches. Chaque carte fait 80 pour cent de large, donc la suivante apparaît au bord.
Sections pleine page
Sections verticales qui s'accrochent sous un en-tête fixe
L'accroche est sur html, la zone de défilement de la page. scroll-padding-top garde les sections dégagées d'un en-tête de 64px, et proximity évite de piéger les longues sections.
Boutons suivant et précédent
Piloter le carrousel avec scrollBy
Le navigateur termine le mouvement sur le point d'accroche le plus proche, donc défiler de la largeur d'une carte tombe exactement sur la carte suivante.
Bac à sable scroll snap
Axe
Rigueur
Alignement des diapositives
S'arrêter sur chaque diapositive
Aperçu du scroll snap, faites défiler ou utilisez les flèches