Scroll-snap-align - Propriété CSS

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

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.

scroll-snap-align s'utilise sur les éléments qui servent d'accrochage.

Voyez également les propriétés suivantes :

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), bien que scroll-snap-align soit toujours fixée sur start..

  Langues latines

  Langues latines

  Langues latines

  Langues latines

  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

  Langues latines

  Langues latines

  Langues latines

  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: start center;

  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.

Compatibilité des navigateurs avec scroll-snap-align.

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

1

Défilements avec
accrochages

2

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

Caniuse

Histoire de la propriété scroll-snap-align.

• Module CSS - Défilement avec accrochages - Niveau 1

  Ce module de spécification définit les fonctionnalités concernant les défilements avec positions d'accrochage. Autrement dit les défilements calés par le contenu, pour éviter par exemple qu'une image se retrouve coupée en haut ou en bas de son conteneur.

  Concernant scroll-snap-align. Première présentation de la propriété scroll-snap-align.
  

  26 Mars 2015

  Document de travail.

  

  20 Octobre 2016

  Candidat à la recommandation.

  

  

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

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

Propriétés :