Qu'est-ce que Generateur CSS scroll-snap ?
CSS scroll-snap controle la position de defilement d'un conteneur afin qu'il s'aligne sur des points d'ancrage que vous definissez. Il permet de creer des carrousels, des galeries horizontales et un defilement section par section sans JavaScript. Le navigateur gere la physique d'accrochage, ce qui le rend fluide sur le pavé tactile, la molette de la souris et les appareils tactiles.
Réponse rapide
Creez des regles CSS scroll-snap pour carrousels, galeries et mises en page section par section. Choisissez la direction, le type d'accrochage et l'alignement pour controler comment la position de defilement s'accroche a chaque element enfant.
Last updated: 2026-06-11
Limites
- Le type d'accrochage mandatory peut empecher le defilement rapide sur du contenu long car la position de defilement s'accroche a chaque enfant, rendant la navigation rapide rigide.
- Scroll-snap necessite que le conteneur ait overflow defini sur scroll ou auto. Les conteneurs avec overflow: hidden n'activeront pas le comportement scroll-snap.
- L'accrochage de defilement peut entrer en conflit avec les preferences utilisateur prefers-reduced-motion. Les utilisateurs qui ont demande une reduction de mouvement peuvent trouver les points d'accrochage forces desorientants. Encapsulez le comportement d'accrochage dans un bloc @media (prefers-reduced-motion: no-preference) pour respecter les parametres d'accessibilite.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
Comment utiliser cet outil
- Selectionnez la direction de defilement : horizontale pour les carrousels et galeries, verticale pour les pages section par section.
- Choisissez le type d'accrochage : mandatory accroche toujours au point le plus proche, proximity accroche seulement lorsque le defilement est pres d'un point d'accrochage.
- Selectionnez l'alignement : start aligne l'enfant au debut du conteneur, center le centre, end aligne a la fin.
- Copiez le CSS genere et le squelette HTML, puis remplacez le contenu enfant placeholder par le votre.
A quoi il sert
- Construire une galerie d'images horizontale qui s'accroche a chaque image lors du defilement ou du balayage.
- Creer un site d'atterrissage plein ecran ou chaque section s'accroche a la vue lors du defilement.
- Remplacer un carrousel JavaScript par un composant CSS scroll-snap leger sans JavaScript.