CSS Scroll Snap

  1. CSS Scroll Snap c'est quoi ?
  2. Propriété scroll-snap-type
  3. Propriété scroll-snap-align
  4. Les autres propriétés
  5. Les possibilités
  6. Aller plus loin

👉 Introduction :

Nommé à l'origine Scroll Snap Points, puis CSS Scroll Snap, ce module, qui est à l'heure de la rédaction de cet article candidat au statut de recommandation🔗, introduit les positions d'accroche lors du défilement garantissant ainsi la position sur laquelle on arrive après avoir fait défiler du contenu.

Si cette définition est un peu floue pour l'instant, rassurez-vous, les exemples plus bas vous aideront à comprendre le principe et surtout l'intérêt d'un tel module CSS.

Nous n'aborderons pas dans cet article l'ancienne spécification🔗, autant s'intéresser directement à la nouvelle qui, comme vous pouvez l'imaginez, souffre encore de l'incompatibilité de certains navigateurs🔗.

Cependant, si vous souhaitez d'ores et déjà utiliser ce nouveau module, il existe un polyfill🔗.

⚠️ NB : le module CSS Scroll Snap fonctionne sur Safari iOS à condition que le conteneur possède la propriété -webkit-overflow-scrolling avec la valeur touch et que le contenu soit enveloppé par la propriété overflow ayant pour valeur visible.


👉 Propriété scroll-snap-type :

Comme dans chaque nouveau module CSS, on y retrouve de nouvelles propriétés. La propriété la plus importante qui s'applique à l'élément conteneur est scroll-snap-type.

Cette propriété va permettre de définir la force d'adhérence aux points d'accroche lors du défilement de l'élément conteneur. C'est l'agent utilisateur, autrement dit la navigateur, qui va se charger de la gestion de ces points d'accroche.

Les valeurs pour cette propriété sont les suivantes :

De plus il existe deux mots-clé qui peuvent s'associer aux valeurs ci-dessus (dont nous parlerons un peu plus bas) :

Exemple sur l'axe x :

Ce qui nous donne le code suivant :



<div class=demo>

<img src="image.jpg" alt>
<img src="image.jpg" alt>
<img src="image.jpg" alt>

</div>




.demo {

scroll-snap-type: x;
overflow-x: scroll;
display: flex;
margin:2rem auto;
width: 420px;
	
}

.demo img{

height: 279px

}


Exemple sur l'axe y :

Ce qui nous donne le code suivant :



<div class=demo>

<img src="image.jpg" alt>
<img src="image.jpg" alt>
<img src="image.jpg" alt>

</div>




.demo {

margin:2rem auto;
overflow-y: scroll;
height: 300px;
scroll-snap-type: y;

}

.demo img {
 
height: 300px;  
display: flex;
scroll-snap-align: start;
object-fit:cover

}

Exemple axe x et y :

Ce qui nous donne le code suivant :



<div class=demo>

<img src="image.jpg" alt>
<img src="image.jpg" alt>
<img src="image.jpg" alt>
<img src="image.jpg" alt>
<img src="image.jpg" alt>
<img src="image.jpg" alt>

</div>




.demo {

margin:2rem auto;
display: grid;
overflow: scroll;
grid-gap:1rem;
grid-template-columns: repeat(3,30vw);
grid-template-rows: repeat(3, auto);
height: 300px;
scroll-snap-type: both;

}

.demo img {
 
height: 300px;  
width: 100%;
display: flex;
object-fit:cover

}
	

⚠️ A noter : ce module utilise un modèle d'alignement de boîte, d'où l'utilisation de la valeur flex (on peut aussi utiliser la valeur grid comme sur l'exemple avec la valeur both de la propriété scroll-snap-type) dans le conteneur qui permet que toutes les images se suivent horizontalement. La mise en place n'en est que plus simple. Il est donc inutile de le renseigner lorsque vous travaillez sur l'axe y.

Hum... Mais le défilement se comporte de manière classique. Quelle est donc cette supercherie ?

En effet, la propriété scroll-snap-type ne fait que poser les bases qui permettra le contôle du défilement. C'est là que la propriété scroll-snap-align fait son apparition.


👉 Propriété scroll-snap-align :

La propriété scroll-snap-align définit la position de la boîte d'accroche (que l'on nomme snap positions). Elle comprend deux valeurs qui s'appliquent respectivement à l'axe x et à l'axe y. Lorsqu'une seule valeur est fournie, la seconde prendra par défaut la valeur de la première.

Il existe quatre valeurs à cette propriété :

⚠️ La propriété scroll-snap-align doit toujours se trouver dans l'élément enfant du conteneur et non pas dans le conteneur lui-même. Nous allons utiliser un exemple pour chaque valeur afin que vous puissiez distinguer la différence (le fonctionnement est la même que ce soit sur l'axe x ou y):

👌 Ok ! Nous avons passé en revue les deux principales propriétés du module. Mais comme vous avez pu le remarquer, lorsque l'on clique sur la barre du scroll, les points d'accroche sont plus ou moins bien respectés.

🤔 Hum... Attendez... Nous avons évoqué en ce qui concerne la propriété scroll-snap-type les valeurs mandatory et proximity qui spécifient la rigueur de la sélection du défilement (ou zone de capture).

Exemple avec la valeur proximity :

Exemple avec la valeur mandatory :

🔎 Nous pouvons constater que seule la valeur mandatory permet un contrôle optimal de la zone de capture. En effet, avec le valeur proximity, c'est le navigateur qui décide si l'élément va s'aligner à un point d'accrochage donné.


👉 Les autres propriétés :

On notera quelques propriétés raccourcies supplémentaires, à savoir :

Cette propriété (qui pourrait faire l'objet d'un retrait selon la spécification) peut s'avérer utile notamment sur les appareils mobiles où l'utilisateur peut faire défiler le contenu très rapidement d'un seul coup, le navigateur ignorant ainsi plusieurs points de capture potentiels.

La propriété scroll-snap-stop permet alors de forcer le défilement à s’arrêter sur un ou plusieurs éléments en particulier.

NB : Il existe d'autres propriétés que vous pouvez découvrir ici🔗.


👉 Les possibilités :

Outre les diaporamas qui ont servis d'exemples plus haut, voici un genre d'application réalisé en HTML/CSS. Avec le module CSS Scroll Snap, vous pouvez balayer avec le doigt les différentes parties de l'application sur mobile et sur bureau, vous pouvez utiliser le menu ou les boutons pour passer les différentes étapes. Bien entendu, il faudra passer par JavaScript pour récupérer et traiter les informations saisies.

Si en plus vous installez un service worker🔗, alors vous obtenez une vraie application qui fonctionnera hors ligne.

Pizza Express
Passez commande : étape 1
Taille de votre pizza ?
8€ 9.50€ 12€
Quantité ?
Continuer
Pizza Express
Etape 2
Base pour votre pizza ?
Ingrédients pour votre pizza ?
Pizza Express
Etape 3
Récapitulatif de votre commande
Taille Quantité Base Ingrédients Prix
Petite 1 Crème Thon , miel, pommes de terre, jambon 10€
Pizza Express
Etape 4
Paiement de votre commande

type de carte :

Autres idées :

Vous pouvez également concevoir assez facilement un site web (ou portfolio) en one page avec le module CSS Scroll Snap. De même, vous pouvez réaliser des sliders de présentation à la PowerPoint. Bref, les possibilités sont nombreuses.

Conclusion :

Bien que la spécification ne soit pas complètement terminée, rien de vous empêche de mettre en place le module. En effet, même si un navigateur ne prend pas en charge CSS Scroll Snap, l'utilisateur pourra quand même naviguer de manière classique avec le scroll sans gêne aucune.


👉 Aller plus loin :

Article (EN)🔗 CSS Scroll Snap de deux développeurs de chez Google

A voir sur ce blog un article sur la propriété scroll-behavior.

A voir sur ce blog une démonstration d'un slider utilisant CSS Scroll Snap.