Guillaume Duverger / Développement & Graphisme
CSS SCROLL SNAP C'EST QUOI ?
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 re-
commandation (https://www.w3.org/TR/css-scroll-snap-1/)���, 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'in-
térêt d'un tel module CSS.
Nous n'aborderons pas dans cet article l'ancienne spécification
(https://www.w3.org/TR/2015/WD-css-snappoints-1-20150326/)���, au-
tant s'intéresser directement à la nouvelle qui, comme vous pouvez
l'imaginez, souffre encore de l'incompatibilité de certains navigateurs
(https://caniuse.com/#feat=css-snappoints)���.
Cependant, si vous souhaitez d'ores et déjà utiliser ce nouveau module,
il existe un polyfill (https://www.npmjs.com/package/css-scroll-snap-
polyfill)���.
��� NB : le module CSS Scroll Snap fonctionne sur Safari iOS à condi-
tion 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é
1 sur 15
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 utili-
sateur, 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 :
→ 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) :
→ mandatory
2 sur 15
→ proximity
Exemple sur l'axe x :
Ce qui nous donne le code HTML suivant :
<div class=demo>
<img src="image.jpg" alt><img src="image.jpg" alt><img src="image.jpg" alt>
</div>
Le code CSS correspondant :
3 sur 15
.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 HTML suivant :
4 sur 15
<div class=demo>
<img src="image.jpg" alt><img src="image.jpg" alt><img src="image.jpg" alt>
</div>
Le code CSS correspondant :
.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 :
5 sur 15
Ce qui nous donne le code HTML 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>
Le code CSS correspondant :
6 sur 15
.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 horizontale-
ment. 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
7 sur 15
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'ap-
pliquent 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 dis-
tinguer la différence (le fonctionnement est la même que ce soit sur l'axe
x ou y):
8 sur 15
valeur start
valeur center
9 sur 15
�� 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 respec-
tés.
�� Hum... Attendez... Nous avons évoqué en ce qui concerne la pro-
priété scroll-snap-type les valeurs mandatory et proximity qui spéci-
fient la rigueur de la sélection du défilement (ou zone de capture).
Exemple avec la valeurproximity:
valeur end
10 sur 15
Exemple avec la valeurmandatory:
�������� Nous pouvons constater que seule la valeur mandatory permet un
contrôle optimal de la zone de capture. En effet, avec le valeur proximi-
11 sur 15
ty, c'est le navigateur qui décide si l'élément va s'aligner à un point d'ac-
crochage 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
12 sur 15
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 naviga-
teur 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
(https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Scroll_Snap)���.
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 (https://developer.mozilla.org
/fr/docs/Web/API/Service_Worker_API)���, alors vous obtenez une vraie
application qui fonctionnera hors ligne.
13 sur 15
Voirexemple
��� (https://www.guyom-design.com/blog/../../../../demos/css/scroll-snap-css-app/)
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.
ALLER PLUS LOIN :
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 navi-
gateur 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.
Article (EN) (https://developers.google.com/web/updates/2018/07/css-
scroll-snap)��� 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.
14 sur 15
La trentaine passée, cultivant un intérêt pour toute
forme d'art, éternel insatisfait et grand amateur de café.
A vingt-quatre ans, je deviens artiste peintre profes-
sionnel (https://www.guyom-design.com/artiste/) (SIRET :
49073847300019) sous le pseudonyme Guyom, puis .G (point G). Je
participe à un certain nombre d'expositions en France, co-organise
des festivals, et ouvre même une galerie dans laquelle j'expose mes
tableaux ainsi que les oeuvres d'artistes locaux.
En 2009, je décide de devenir infographiste freelance tout en conti-
nuant mon activité picturale. Depuis lors, j'ai pu réaliser de nombreux
sites web, des logos, des affiches, des flyers et autres brochures...
Vous pouvez voir mon actualité en me suivant sur mon compte Twitter
(https://twitter.com/guyomdesign) ou en visitant mon blog sur lequel
j'écris des articles, mets à disposition des ressources, des astuces,
des tutoriels... sur des sujets concernant le développement et le gra-
phisme.
15 sur 15
Top Related