Concepts de bases pour CSS Scroll Snap

Les propriétés principales définies par la spécification Scroll Snap sont scroll-snap-type et scroll-snap-align. La propriété scroll-snap-type s'utilise sur le conteneur de défilement (scroll container) et établit le type et la direction du défilement.

La propriété scroll-snap-align doit être utilisée sur les éléments fils afin de définir la position de défilement sur laquelle ils s'accrocheront. L'exemple qui suit illustre des positions d'accroche sur l'axe vertical et scroll-snap-align est utilisée sur l'élément <section> afin de définir le point où devrait s'arrêter le défilement.

La propriété scroll-snap-type doit connaître la direction selon laquelle s'effectue le défilement et l'accroche. Cette direction peut s'exprimer avec des valeurs physiques : x ou y ou avec des valeurs logiques : block ou inline. On peut également utiliser le mot-clé both afin d'avoir un défilement et des accroches selon les deux axes.

Cette propriété s'utilise également avec les mots-clés mandatory ou proximity. Le mot-clé mandatory indique au navigateur que le contenu doit s'accrocher à un point donné, quelle que soit la position du défilement. Le mot-clé proximity indique que le contenu peut s'accrocher sur un point mais que ce n'est pas obligatoire.

La valeur mandatory permettra d'obtenir une expérience cohérente au sens où l'utilisateur saura que le navigateur accrochera le contenu à chaque point. Cela signifie qu'on peut être certain que quelque chose sera en haut de l'écran à la fin du défilement. Toutefois, cela peut entraîner des problèmes lorsqu'un portion du contenu est trop grande et qu'on obtient un scénario où il est impossible de défiler afin de voir une portion donnée du contenu. Ainsi, on utilisera mandatory dans des situations maîtrisées où la taille du contenu sur un écran est connue.

La valeur proximity déclenchera une accroche lorsque la position du défilement est proche du point d'accroche. C'est le navigateur qui décidera de la distance seuil exacte pour laquelle déclencher l'accroche ou non. Dans l'exemple qui suit, vous pouvez passer de mandatory à proximity afin d'observer l'effet obtenu.

La propriété scroll-snap-align peut être utilisée avec les valeurs start, end ou center. Ces valeurs indiquent l'emplacement où le contenu doit s'accrocher sur le conteneur de défilement. Vous pouvez modifier la valeur scroll-snap-align dans l'exemple interactif qui suit pour voir le résultat obtenu.

Si on ne souhaite pas que le contenu s'accroche exactement sur le bord du conteneur de défilement, on pourra utiliser la propriété scroll-padding (ou les propriétés détaillées équivalentes) afin de définir un remplissage (padding) pour décaler la position du contenu.

Dans l'exemple qui suit, on paramètre scroll-padding à 40 pixels. Lorsqu'on accroche au début de la deuxième et de la troisième section, le défilement s'arrête à 40 pixels du début de la section. Vous pouvez adapter la valeur de scroll-padding afin de voir l'impact sur le décalage obtenu.

Cette propriété s'avère particulièrement utile lorsqu'on a un élément fixe (une barre de navigation par exemple) qui pourrait être chevauchée par du contenu qui défile. En utilisant scroll-padding, on peut réserver un espace pour cet élément fixe. Dans l'exemple suivant, on peut voir le titre <h1> qui reste à l'écran et le contenu qui défile en dessous de ce titre. Sans le remplissage, le titre aurait été chevauché par une partie du contenu lors de l'accroche.

Une autre méthode permettant d'obtenir un espace entre le bord du conteneur et les éléments fils est d'utiliser la propriété scroll-margin sur l'élément fils. scroll-margin définit principalement le décalage par rapport à la boîte définie. Vous pouvez manipuler cette propriété dans l'exemple interactif suivant :

La propriété scroll-snap-stop indique au navigateur qu'il devrait arrêter le défilement pour chaque point d'accroche. Pour nos exemples précédents, cela signifie qu'on s'arrêtera nécessairement au début de chaque section. Cette propriété dispose de moins d'implémentations dans les navigateurs.

Cela peut être utile pour s'assurer que les utilisateurs consultent chaque section sans louper du contenu par inadvertence. En revanche, cela peut rendre le défilement plus lent et ralentir considérablement un utilisateur qui chercherait une section donnée.

Les pages de chaque propriété détaillent la compatibilité des différents navigateurs. On notera qu'avant Firefox 68, une ancienne version de la spécification était implémentée. Vous pouvez poursuivre avec le guide suivant pour en savoir plus sur l'écriture de code compatible entre les différents navigateurs qui implémentent différentes versions de la spécification.