scroll-snap-align
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis janvier 2020.
La propriété scroll-snap-align définit la position de la boîte d'accroche (snap positions) comme un alignement entre la zone d'accroche et le conteneur (la boîte de défilement de l'élément). Les deux valeurs fournies à cette propriété s'appliquent respectivement à l'axe de bloc et à l'axe en ligne. Lorsqu'une seule valeur est fournie, la seconde prendra par défaut la valeur de la première.
Syntaxe
/* Valeurs avec un mot-clé */
scroll-snap-align: none;
scroll-snap-align: start end;
scroll-snap-align: center;
/* Valeurs globales */
scroll-snap-align: inherit;
scroll-snap-align: initial;
scroll-snap-align: unset;
Valeurs
none-
La boîte ne définit aucune position d'accroche sur cet axe.
start-
Le point d'alignement situé au début de l'axe et sur le bord de la boîte de défilement est une position d'accroche sur cet axe.
end-
Le point d'alignement situé à la fin de l'axe et sur le bord de la boîte de défilement est une position d'accroche sur cet axe.
center-
Le point d'alignement situé au centre de l'axe et à l'intérieur de la boîte de défilement est une position d'accroche sur cet axe.
Définition formelle
| Valeur initiale | none |
|---|---|
| Applicabilité | tous les éléments |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |
Syntaxe formelle
scroll-snap-align =
[ none | start | end | center ]{1,2}
Spécifications
| Specification |
|---|
| CSS Scroll Snap Module Level 1 # scroll-snap-align |
Compatibilité des navigateurs
Chargement…