Scroll-snap

scroll-snap-type

La propriété scroll-snap-type permet de définir les règles de défilement affectant les éléments présents dans un conteneur. Autrement dit, une fois le défilement terminé, est-ce que la position des éléments devrait rester telle quelle ou est-ce qu’un effet de magnétisme devrait réajuster leurs positions?

Cette propriété est notamment utile afin de créer des effets de carrousel. L’usager fait défiler librement des photos, mais lorsqu’il s’arrête, un réajustement automatiquement permet d’afficher en entier la photo dominante, masquant du même coup le résidu de la photo précédente ou suivante.

Direction

Afin de fonctionner, il faut spécifier à cette propriété la direction désirée de l’effet de magnétisme:

• none aucun magnétisme

• x magnétisme horizontal seulement ↔️

• y magnétisme vertical seulement ↕️

• both magnétisme horizontal et vertical 

Comportement

Cette valeur peut-être ajoutée à celle de direction afin de spécifier la force du magnétisme 🧲:

• proximity l’effet de magnétisme ne sera déclenché au relâchement que si un élément est à proximité des limites de son conteneur.

• mandatory l’effet de magnétisme sera déclenché au relâchement à toutes les occasions.

scroll-snap-align

Cette propriété permet de spécifier à un élément son alignement idéal lorsque le magnétisme se produit. 

Si un élément a la même taille que son conteneur, cette propriété n’aura pas d’effet visible. Cependant, si l’élément est plus petit ou plus grand que son conteneur, cette propriété permettra de spécifier si l’effet de magnétisme doit se faire avec le début, la fin ou le centre de l’élément.

Valeurs possibles

• none l’élément ne doit pas avoir d’effet de magnétisme

• start l’élément doit-être attiré vers le début du conteneur

• end l’élément doit-être attiré vers la fin du conteneur

• center l’élément doit-être attiré vers le centre de son conteneur

CodePen | smnarnold 👀

scroll-padding

Par défaut l'effet de magnétisme "snap" les éléments aux limites du conteneur. Cependant, il est possible de décaler le point d'accroche grâce à la propriété scroll-padding.

Cette propriété peut s'avérer particulièrement utile si un élément masque une partie du contenu défilant.

Par exemple un entête:

Il est possible de définir une marge intérieure de tous les côtés grâce à scroll-padding ou encore d'en définir une d'un côté en particulier, via:

• scroll-padding-top

• scroll-padding-right

• scroll-padding-bottom

• scroll-padding-left

Sur le même principe que la propriété padding.