Scroll-snap-type - Propriété CSS

scroll-snap-type

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

Description rapide

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

Statut

Standard

Utilisable sur

{HTML}

Pourcentages

{none}

Valeur initiale

none

Héritée par défaut

{false}

Type d'animation

{discrete}

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

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

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.

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)

Les propriétés qui permettent de gérer le défilement avec accrochages sont :

Principalement scroll-snap-type, à appliquer sur le conteneur défilant. Cette propriété définit la direction du défilement concerné (vertical ou horizontal) et le type d'accrochage à utiliser.
scroll-snap-align définit quels éléments serviront de points d'accrochage et comment ceux-ci seront alignés par rapport à la fenêtre d'affichage.
scroll-snap-stop définit si le défilement doit s'arrêter sur tous les points d'accrochage, ou seulement sur les points d'accrochage pas trop éloignés.
scroll-padding (à appliquer au conteneur) et scroll-margin (à appliquer aux éléments d'accrochage) définissent un décalage évitant de coller l'élément exactement au début de la fenêtre d'affichage.

La propriété overflow est également utile pour rendre le conteneur défilant (condition indispensable).

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

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

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

Colonne 1

Prise en charge du défilement par accrochages (lors de la manipulation des barres de défilement, le contenu s'arrête à des endroits pertinents).

Colonne 2

Support de la propriété scroll-snap-type qui définit la direction de défilement soumis à l'accrochage.

Remarques :

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

Défilements
avec accrochages

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

Histoire de la propriété `scroll-snap-type`.

Module CSS - Défilement avec accrochages - Niveau 1

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 CSS Scroll Snap Module. La propriété scroll-snap-type 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-align

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

scroll-snap-stop

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