scroll-snap-align

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.

Valeur initialenone
Applicabilitétous les éléments
Héritéenon
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniqueselon la grammaire

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.

Syntaxe formelle

[ none | start | end | center ]{1,2}

Spécifications

Spécification État Commentaires
CSS Scroll Snap Module Level 1
La définition de 'scroll-snap-align' dans cette spécification.
Candidat au statut de recommandation Initial definition

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simpleChrome Support complet 69Edge Aucun support NonFirefox Aucun support NonIE Aucun support NonOpera Support complet 56Safari Support complet 11WebView Android Support complet 69Chrome Android Support complet 69Edge Mobile Aucun support NonFirefox Android Aucun support NonOpera Android Support complet 56Safari iOS Support complet 11Samsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support

Attention ! Pour Safari, la syntaxe utilisant les deux valeurs intervertit les deux valeurs (la première cible l'alignement en ligne et la seconde l'alignement en bloc). Voir le bug n°191865.

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight
Dernière mise à jour par : SphinxKnight,