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