Une introduction à CSS Scroll Points Snap

le Module de défilement CSS est un standard Web qui nous donne un certain contrôle sur défilement sur une page Web afin que nous puissions faire défiler les utilisateurs vers certaines parties d'une page plutôt que vers n'importe où.

Défilement est l'une des actions les plus effectuées sur un site web. Les navigateurs, au fil des ans, ont amélioré leurs performances de défilement pour correspondre à la force des doigts agiles des utilisateurs. Et les développeurs ont utilisé défilement de façon créative pour obtenir une expérience utilisateur meilleure ou prête à l'emploi.

Cependant, en ce qui concerne la corrélation entre codage et défilement, seul JavaScript semblait avoir le moindre contrôle sur ces derniers. C’était le cas pendant une longue période, mais avec le introduction de points d'accrochage de défilement, CSS a commencé à rattraper.

Défilement sans points d'accrochage

En règle générale, nous ne faisons pas défiler très lentement, surtout sur les téléphones. Plus vous faites défiler rapidement, moins vous avez de contrôle où sur l'écran vous finirez quand tu as arrêté de faire défiler.

Imaginez que vous faites défiler une gamme d'images de produits sur un site Web, une galerie de photos ou des diapositives en ligne. Ce que vous préférez dans de telles applications est de voir le produit entier, la photo ou la diapositive chaque fois que vous faites défiler. Pas seulement partie de l'image du produit, photo ou diapositive.

Par exemple, sur la démo ci-dessous, vous pouvez voir à chaque fois que l'utilisateur arrête de faire défiler l'écran, uniquement environ la moitié de l'image est visible au bas de l'écran. Cependant, la plupart des utilisateurs préfèrent voir la dernière image entièrement.

Défilement avec points d'accrochage de défilement

C'est là que nous apportons Points d'accrochage CSS. Le nom s'explique de lui-même; c'est une norme CSS qui nous permet de encliqueter les articles en place en faisant défiler.

Il y a cinq propriétés CSS qui constituent cette norme:

1. type de défilement
2. scroll-snap-points-x
3. scroll-snap-points-y
4. scroll-snap-coord
5. scroll-snap-destination

Support du navigateur

Les propriétés avoir besoin -webkit et -Mme préfixes pour les navigateurs pertinents. Au moment de la rédaction de cet article, l'accrochage de défilement CSS n'est pas pris en charge dans Chrome et Opera..

Notez que les quatre dernières propriétés risquent d’être abandonnées par les agents utilisateurs dans un avenir proche. Au lieu, nouvelles propriétés, à savoir scroll-snap-align, scroll-snap-margin, et défilement-snap-padding, pourrait être créé, tel que défini dans cette spécification.

Cependant, ils vont avoir un but similaire comme les anciennes propriétés. Actuellement, l'ancien ensemble de propriétés fonctionnera parfaitement.

Propriétés

Tu dois ajouter le type de défilement propriété du conteneur de défilement (l'élément conteneur dont les enfants débordent pendant le défilement). Il spécifie le rigueur de l'action instantanée. Il peut prendre trois valeurs:

1. obligatoire - lorsque le défilement est terminé, le défilement enclencher à un point d'accrochage pertinent
2. proximité - moins stricte que obligatoire; ce sera dépend du jugement du UA si l'élément s'accroche à un point d'accrochage donné
3. aucun - aucune capture n'est faite

le scroll-snap-points-x et scroll-snap-points-y Propriétés appartenir au conteneur de défilement, aussi. Ils se réfèrent aux points sur les axes x et y où les points d'accrochage existeront. Leur valeur est donné par le répéter() une fonction. Par exemple, si vous souhaitez ajouter des points de capture le long de l’axe des x à l’intervalle de 100px vous devez utiliser le scroll-snap-points-x: répéter (100px) règle.

le scroll-snap-destination La propriété est également ajoutée au conteneur de défilement. Il définit une coordonnée sur le conteneur où une destination instantanée se trouve. C’est à cette destination d’accrochage que les enfants du conteneur s’arrêtent en position de défilement..

Vous pouvez utiliser le scroll-snap-coord propriété en liaison avec scroll-snap-destination. Vous devez l'ajouter aux éléments enfants du conteneur. Il définit les coordonnées des éléments enfants, qui s'alignera sur les coordonnées de destination de leur conteneur de défilement lorsque l'utilisateur fera défiler l'écran.

Notez qu'il n'est pas nécessaire d'utiliser toutes les propriétés en même temps. Seulement type de défilement est obligatoire. Parallèlement à cela, vous pouvez définir des points d'accrochage individuels ou utiliser la combinaison destination-coordonnée..

Exemple de code

Voici un exemple d'extrait de code pour une conteneur de défilement typique, avec défilement vertical et quelques images à l'intérieur. Il sort la démo que vous pouvez trouver au début de ce post.

 div width: 300px; hauteur: 300px; débordement: auto;… div> img width: 250px; hauteur: 150px;… 

Maintenant nous ajouter des points d'accrochage au conteneur de défilement:

 div width: 300px; débordement: auto; scroll-snap-points-y: répéter (150px); scroll-snap-type: obligatoire;  

Ci-dessous, vous pouvez voir à quoi ressemble la sortie avec Points d'accrochage CSS ajoutés. Notez que chaque fois que le défilement s’arrête alors que l’image du bas n’est que partiellement visible, la l'image complète apparaît après que le scrollport s'accroche dans un point de capture au dessus.