Scroll-snap-type - Propriété CSS

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

Description des termes utilisés sur le schéma :

• L'étoile indique une valeur qu'il est possible d'omettre (valeur par défaut).

Description de la propriété scroll-snap-type.

La propriété scroll-snap-type définit un défilement avec accrochages, et plus précisément, la direction du défilement (horizontal ou vertical) et le type d'accrochage.

Reportez-vous à ce mini tutoriel pour une présentation générale des défilements avec accrochages (Scroll Snap) : défilements avec accrochages.

Voyez également les propriétés suivantes :

Valeurs pour scroll-snap-type.

• scroll-snap-type: none;

  Valeur par défaut. Le conteneur, s'il s'agit d'un conteneur défilant, propose un défilement classique, sans points d'accrochage.

• scroll-snap-type: x; scroll-snap-type: y; scroll-snap-type: inline; scroll-snap-type: block; scroll-snap-type: both;

  Ces valeurs définissent dans quelle direction le défilement avec accrochages est activé. x et y sont des valeurs absolues, indépendantes du mode d'écriture, tandis que block et inline sont dépendantes du mode d'écriture.

  • x : direction horizontale, quelque soit le mode d'écriture.
  • y : direction verticale, quelque soit le mode d'écriture.
  • inline : dans la direction des lignes, c'est à dire horizontalement pour les langues latines, et verticalement pour les langues CJK.
  • block : dans la direction des blocs, c'est à dire verticalement pour les langues latines, et horizontalement pour les langues CJK.
  • both : le défilement avec accrochages est activé dans les deux directions.

  Ces valeurs sont sans effet si le conteneur n'est pas défilant (voir la propriété overflow).

• scroll-snap-type: y proximity;

  La valeur proximity indique que le défilement s'arrêtera sur le point d'accrochage le plus proche. Si toutefois le point d'accrochage est trop éloigné, le défilement n'est pas ajusté au point d'accrochage. C'est l'option la plus courante. D'ailleurs on peut omettre de préciser proximity.

  Voyez l'exemple ci-dessous pour comparer avec la valeur mandatory.

• scroll-snap-type: y mandatory;

  Le défilement doit obligatoirement être ajusté au point d'accrochage le plus proche. Le dernier élément peut cependant échapper à cette règle s'il est plus grand ou plus petit que la fenêtre d'affichage. Si aucun point d'accrochage n'existe dans le contenu, le défilement n'est pas ajusté.

  Pour bien constater la différence de résultat entre les valeurs proximity et mandatory, faites défiler les conteneurs ci-dessous en tournant la molette de la souris d'un cran seulement.

  1

  2

  3

  4

  5

  
  
  
  
  
  
   

  scroll-snap-type: y proximity;

  1

  2

  3

  4

  5

  
  
  
  
  
  
   

  scroll-snap-type: y mandatory;

• scroll-snap-type: initial; (none) scroll-snap-type: inherit; scroll-snap-type: revert; scroll-snap-type: revertLayer; scroll-snap-type: unset;

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

Qu'est-ce que le Scroll Snap ?

Lorsque le contenu d'un élément dépasse ses dimensions, il est d'usage de rendre cet élément défilable. Le lecteur peut faire apparaître la partie du contenu qu'il souhaite en utilisant les barres de défilement ou la molette de la souris sur un ordinateur de bureau, ou en glissant le doigt sur un terminal tactile. Ce défilement se fait le plus souvent verticalement, mais peut aussi se faire horizontalement, ou dans les deux directions.

Mais ce défilement n'est pas lié au contenu : il arrive fréquemment qu'un élément soit affiché partiellement en haut de la fenêtre d'affichage. Ceci peut être gênant par exemple s'il s'agit d'une série de photos affichées les unes à la suite des autres. Le défilement avec accrochages (Scroll Snap) consiste à définir des points d'accrochage dans le contenu pour arrêter le défilement à des endroits pertinents.

Ci-dessous, la première liste d'images propose un défilement classique. Les images ont des hauteurs différents. L'utilisateur doit doser lui-même le défilement pour qu'une image s'affiche en entier en haut de la liste.
Le deuxième élément utilise la technique Scroll Snap : la molette de la souris ou un clic dans la glissière de la barre de défilement affiche l'image suivante ou précédente en la calant exactement en haut de la liste. Le défilement se fait d'abord de la quantité demandée, puis le système l'ajuste pour caler un des points d'accrochage au début de la fenêtre d'affichage. Si aucun point d'accrochage n'est proche, cet ajustement peut ne pas être fait.

 

Défilement classique

 

Défilement avec accrochages
(Scroll Snap)

Exemple d'animation de scroll-snap-type.

la propriété scroll-snap-type peut être animée. Ses valeurs étant non numériques, la propriété bascule brutalement d'une valeur à une autre. Mais l'animation de scroll-snap-type présente peu d'intérêt, et ne produit pas d'effet visuel visible.

Accéder à la propriété scroll-snap-type par programme.

Avec Javascript, modifier la valeur de scroll-snap-type.

Les deux codes Javascript ci-dessous modifient la valeur de la propriété scroll-snap-type pour l'élément dont l'ID est spécifié. Deux syntaxes sont possibles : la première avec la notation en kebab-case, typique de CSS, et l'autre avec la notation en camel-case.

let el = document.getElementById('id'); el.style['scroll-snap-type'] = 'block proximity'; // ou let el = document.getElementById('id'); el.style.scrollSnapType = 'block proximity';

Avec Javascript, lire la valeur de scroll-snap-type.

Le code ci-dessous récupère la valeur de la propriété scroll-snap-type si celle-ci a été affectée directement à l'élément lui-même via son attribut style, et non pas en passant par un sélecteur CSS.

let el = document.getElementById('id'); let value = el.style['scroll-snap-type']; // ou let el = document.getElementById('id'); let value = el.style.scrollSnapType;

Avec Javascript, lire la valeur calculée de scroll-snap-type.

La valeur calculée est celle qui résulte de la cascade des héritages. Si la propriété scroll-snap-type n'a été définie ni sur l'élément, si sur aucun de ses parents, alors la valeur calculée est la valeur initiale : none dans le cas de scroll-snap-type.

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('scroll-snap-type');

Avec JQuery, modifier la valeur de scroll-snap-type.


$('#id').css('scroll-snap-type', 'block proximity');
// ou
$('#id').css('scrollSnapType', 'block proximity');


Avec JQuery, lire la valeur calculée de scroll-snap-type.

let value = $('#id').css('scroll-snap-type');

Testez vous-même.

Les boutons ci-dessous appliquent la valeur saisie à la propriété scroll-snap-type et affichent ensuite soit la valeur telle qu'elle a été appliquée, soit la valeur calculée, ce qui ne fera pas de différence dans le cas de scroll-snap-type. Si toutefois vous tentez d'affecter une valeur incorrecte, la valeur affectée sera vide et la valeur calculé sera none (valeur initiale).
Une particularité dans le cas de scroll-snap-type : la valeur proximity étant une valeur par défaut, elle n'est pas mémorisée.

Compatibilité des navigateurs avec scroll-snap-type.

La prise en charge de scroll-snap-type est bonne, sauf sur Internet Explorer mais ce navigateur n'est pratiquement plus utilisé.

1

Défilements
avec accrochages

2

Propriété
scroll-snap-type

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-type.

• 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-type. Présentation de la propriété scroll-snap-type.
  

  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-type et toutes celles qui se rapporte au sujet sont également présentes dans ce module.

Propriétés :