Scroll-snap-align - Propriété CSS

scroll-snap-align

Résumé des caractéristiques de la propriété `scroll-snap-align`

Description rapide

Définit l'alignement des éléments servant d'accrochage par rapport à la fenêtre d'affichage (scroll Snap).

Statut

Standard

Utilisable sur

HTML

Valeurs prédéfinies

none | start | center | end

Pourcentages

Ne s'appliquent pas.

Valeur initiale

none

Héritée par défaut

Non.

Type d'animation

Discrète : lors d'une animation, la propriété scroll-snap-align passe d'une valeur à l'autre sans transition.

Module W3C

Module CSS - Défilement avec accrochages

Références (W3C)

CSS Scroll Snap Module - Level 1

Statut du document: CR (document candidat à la recommandation)

Schéma de la syntaxe de `scroll-snap-align`.

Schéma syntaxique de la propriété scroll-snap-align.
Les liens du schéma donnent accès à plus de détails

Description de la propriété `scroll-snap-align`.

La propriété scroll-snap-align agit dans le cadre d'une défilement avec accrochages (voir notre tutoriel sur les défilements avec accrochages). Elle définit comment doit être aligné l'élément qui sert d'accroche par rapport à la fenêtre d'affichage.

Valeurs pour `scroll-snap-align`.

scroll-snap-align: none;

L'élément n'est pas considéré comme un point d'accrochage. Si aucun élément du contenu n'est défini comme point d'accrochage, le défilement se fera de façon classique, sans ajustement.

1

2

3

4

5

scroll-snap-align:none;

scroll-snap-align: start;

Le début de l'élément s'aligne sur le début de la fenêtre d'affichage. Le début de l'élément est dépendant du mode d'écriture, suivant la langue. Voir à ce sujet nos explications sur les modes d'écriture.
Voici donc à quoi correspond la valeur start pour les principales langues.

	Défilement horizontal `scroll-snap-type:x;`	Défilement vertical `scroll-snap-type:y;`
Langues latines	Gauche	Haut
Langues arabes	Droite	Haut
Langues CJK	Droite	Haut
Langue mongole	Gauche	Haut
Hébreu	Droite	Bas

Sur les exemples ci-dessous, les accroches sont alignées sur start, donc sur la gauche pour les langues latines, et sur la droite pour les langues arabes (deuxième exemple).

Langues latines

اللغة العربية

scroll-snap-align: end;

Avec la valeur end la fin de l'élément s'aligne sur la fin de la fenêtre d'affichage. En fonction de la langue la valeur end correspond à :

	Défilement horizontal `scroll-snap-type:x;`	Défilement vertical `scroll-snap-type:y;`
Langues latines	Droite	Bas
Langues arabes	Gauche	Bas
Langues CJK	Gauche	Bas
Langue mongole	Droite	Bas
Hébreu	Gauche	Haut

Langues latines

اللغة العربية

scroll-snap-align: center;

Le centre de l'élément s'aligne avec le centre de la fenêtre d'affichage. Cette valeur n'est pas dépendante du mode d'écriture, le centre étant le même quelque soit la langue.

1
2
3
4
5
scroll-snap-align: center start;

En principe, la syntaxe de scroll-snap-align attend deux valeurs. C'est nécessaire lorsqu'il faut distinguer la direction des blocs (première valeur) de la direction des lignes (deuxième valeur). Lorsqu'une seule valeur est précisée, elle s'applique aux deux directions.

L'exemple ci-dessous montre ce qui se passe avec un alignement au centre dans la direction des lignes (horizontal) et un alignement sur le début dans la direction des blocs (vertical).

A1
A2
A3
A4
A5

B1
B2
B3
B4
B5

C1
C2
C3
C4
C5

D1
D2
D3
D4
D5

E1
E2
E3
E4
E5
scroll-snap-align: initial; (none) scroll-snap-align: inherit; scroll-snap-align: revert; scroll-snap-align: revertLayer; scroll-snap-align: unset;

Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de `scroll-snap-align`.

la propriété scroll-snap-align peut être animée. Ses valeurs étant non numériques, la propriété bascule brutalement d'une valeur à une autre.

Exemple interactif avec la propriété `scroll-snap-align`.

Pour observer l'effet de la propriété scroll-snap-align et de ses différentes valeurs, faites défiler le contenu avec la barre de défilement ou la molette de la souris sur un PC, ou en glissant le doigt sur un écran tactile.

scroll-snap-align :

none

start

center

end

Compatibilité des navigateurs avec `scroll-snap-align`.

La prise en charge de scroll-snap-align est bonne sur tous les navigateurs actuels.

Remarques :

(1) Support partiel du défilement avec accrochage.

Défilements avec
accrochages

Propriété
scroll-snap-align

Estimation de la prise en charge globale.

96%

95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Opéra

Samsung Internet

Firefox pour Androïd

Edge

Firefox

Chrome pour Androïd

Androïd Brower

Safari

Safari sur IOS

Chrome

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Voir aussi, à propos des défilements avec accrochages.

Les défilements avec accrochage sont décrits dans le module CSS Scroll Snap Module. La propriété scroll-snap-align et toutes celles qui se rapporte au sujet sont également présentes dans ce module.

Propriétés :

scroll-margin

Définit les marges de défilement dans le contexte d'un défilement avec accrochages (Scroll Snap).

scroll-padding

Définit les marges intérieures de la fenêtre de défilement.

scroll-snap-stop

Permet de forcer l'arrêt d'un défilement sur certains éléments.

scroll-snap-type

Définit les principales caractéristiques d'un défilement avec accrochages (Scroll Snap).