Nommé à l'origine Scroll Snap Points, puis CSS Scroll Snap, ce module, qui est 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.
Sachez que pour les navigateurs récalcitrants, il existe un polyfill .
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 le navigateur, qui va se charger de la gestion de ces points d'accroche.
Les valeurs pour cette propriété sont les suivantes :
→ none : valeur initiale.
→ x : axe horizontal.
→ y : axe vertical.
→ block : axe de bloc.
→ inline : axe en ligne.
→ both : axe horizontal et vertical.
De plus il existe deux mots-clé qui peuvent s'associer aux valeurs ci-dessus (dont nous parlerons un peu plus bas) :
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é :
→ none : valeur initiale. Aucune position d'accroche.
→ start : l'élément sera aligné au début du conteneur, à gauche sur l'axe x, en haut sur l'axe y.
→ center : l'élément sera aligné au centre du conteneur, que ce soit sur l'axe x ou y.
→ end : l'élément sera aligné à droite du conteneur sur l'axe x et tout en bas sur l'axe y.
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 :
→ scroll-padding : applicable au conteneur visant à réduire la zone de défilement considérée comme visible. Elle comprend les propriétés suivantes et agit comme la propriété padding :
→ scroll-padding-top
→ scroll-padding-right
→ scroll-padding-bottom
→ scroll-padding-left
→ scroll-margin : applicable aux éléments enfants. Valeur initiale à zéro. Comprend les propriétés suivantes et agit comme la propriété margin :
→ scroll-margin-top
→ scroll-margin-left
→ scroll-margin-bottom
→ scroll-margin-right
→ scroll-snap-stop : définit la façon dont le conteneur peut ne pas prendre en compte certaines positions d'accroche. Comprend deux valeurs :
→ normal : valeur initiale. Permet de passer sur certaines positions d'accroche.
→ always : force le conteneur à s'accrocher à la première position d'accroche d'un élément.
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.
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.
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.
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.
Source, inspiration, ressources :
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.
Vous rencontrez un problème avec cet article ?
Vous avez remarqué une faute, un oubli, un lien mort ? Vous ne comprenez pas un point précis de l'article ? Vous pouvez me contacter par mail (contact@guyom-design.com) et je vous aiderai si je le peux.
