Scroll snap, qu'est-ce que c'est ?

Pour notre article d’aujourd’hui j’aimerais prendre un peu d’avance, voir ce qui nous arrive comme nouveauté dans le monde des CSS.

Nous allons découvrir quelques nouvelles règles en préparation, bien pratiques, indispensables, en devenir.

Avant toute chose, il faut savoir que ce que nous allons voir dans cet article n’est pour le moment disponible que sur quelques navigateurs récents, j’utiliserai Firefox (version 39).

Voici un aperçu de ce que nous aurons en fin d’article :

See the Pen Scroll Snap experiment by Victor Darras (@victordarras) on CodePen.

Scroll snapping

A l’image de ce que l’on peut trouver sur les galeries JavaScript ou sur nombre de landing pages récentes, le snappoints permet de définir des points d’arrêt pour le scroll. Tant dans le sens vertical qu’horizontal, il nous permet de contraindre le scroll de l’utilisateur afin de lui offrir la meilleur vue pour chaque image ou élément de DOM à afficher dans un conteneur défini. Comme pour les flexbox, que nous avions exploré dans ce précédent article, le scroll-snap n’a besoin d’être appliqué que sur le conteneur, les éléments enfants n’auront besoin d’aucune modification.

Imaginons que nous voulons créer une galerie horizontal pour présenter une série de 4 photos de tailles identiques. Nous créons un conteneur, dans lequel nous plaçons 4 images :

<div class="galery horizontal">
  <img src="http://lorempixel.com/400/300/sports/1" />
  <img src="http://lorempixel.com/400/300/sports/2" />
  <img src="http://lorempixel.com/400/300/sports/3" />
  <img src="http://lorempixel.com/400/300/sports/4" />
</div>

Il nous suffit ensuite de définir une taille fixe à notre conteneur, d’ajouter les règles d’overflow standard, hidden en général et scroll à l’horizontale, un white-space: nowrap pour que les images se placent les unes à côté des autres et 2 nouvelles règles : scroll-snap-type & scroll-snap-points-x.

.galery {
  overflow: hidden;
  display: inline-block;
  width: 400px;
  height: 300px;
  margin: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.galery.horizontal {
  overflow-x: scroll;
  white-space: nowrap;
  scroll-snap-type: proximity;
  scroll-snap-points-x: repeat(400px);
}

scroll-snap-type

La valeur proximity associée à cette propriété fait en sorte que le snap se produise lorsque l’on scroll à proximité des points d’ancrage que nous définissons. Il n’est pas encore possible de définir avec précision ce point, mais il est plutôt bien géré par Firefox.

Il est possible d’utiliser la valeur mandatory qui permet de définir un point fixe ou scroller lorsque le contenu a été modifié. Pratique pour ne pas perdre un fil de lecture lorsque le contenu change dynamiquement.

scroll-snap-points-x

Cette propriété offre la possibilité de définir les points d’ancrages pour arrêter le scroll. Pour l’instant assez peu souple en terme de personnalisation elle est tout de même plutôt bien pensée pour la valeur repeat qui nous permet de définir une récurrence. J’aurais aimé pouvoir définir un scroll relatif à la taille du conteneur avec 100% par exemple mais j’imagine que ça pourra faire partie de la spécification dans les mois qui viennent.

D’autres exemples

Scroll standard, vertical

Il est évidemment possible de garder le scroll vertical tout en fixant quelques points d’arrêt. On garde notre classe .galery définie précédemment et on lui ajoute quelques règles :

.galery.vertical {
  overflow-y: scroll;
  font-size: 0;
  scroll-snap-type: proximity;
  scroll-snap-points-y: repeat(300px);
}

Ici nous ne modifions que la direction de scroll et la direction des scroll-snap-points et le tour est joué.

Scroll à 2 dimensions

Rien ne nous empêche de définir un scroll encore différent qui nous permet de déplacer le contenu dans les 2 axes. Pour ce faire il faudra utiliser une astuce qui consiste à placer un second conteneur qui aura pour enfants les différentes images :

<div class="galery grid">
  <div class="container">
    <img src="http://lorempixel.com/400/300/sports/1" />
    <img src="http://lorempixel.com/400/300/sports/2" />
    <img src="http://lorempixel.com/400/300/sports/3" />
    <img src="http://lorempixel.com/400/300/sports/4" />
  </div>
</div>

Ensuite nous appliquons des règles pour les 2 directions, horizontale et verticale, sans oublier de définir une taille pour notre sous-conteneur (ici relative à la galerie) :

.galery.grid {
  overflow: scroll;
  font-size: 0;
  scroll-snap-type: proximity;
  scroll-snap-points-x: repeat(400px);
  scroll-snap-points-y: repeat(300px);
}
.galery.grid .container {
  width: 200%;
  height: 200%;
}

Avec cette solution nous pouvons donc aller de gauche à droite et du haut vers le bas en étant sûr de toujours tomber sur un cadrage parfait de notre image.

Quel est intérêt d’une telle propriété ?

Le but premier de l’implémentation d’une telle règle dans les standards est clairement de remplacer les centaines de plugin JavaScript qui pullulent sur internet. La gestion du scroll n’étant pas des plus performante avec JS, je trouve que c’est une très bonne idée.

Vous pouvez bien sûr l’utiliser aussi pour diriger vos utilisateurs plus précisément sur des landing pages, comme vous pourrez le voir sur ce codepen développé pour l’occasion.

N’hésitez pas à partager vos remarques, vos différents cas d’utilisation ou même des idées sur les besoins qui pourraient découler d’une telle propriété.

Vous pouvez aussi partager cet article s’il vous a plus bien évidemment.

Quelques liens utiles

Le scroll-span-type sur le MDN Merci au tweet de @supersole pour m’avoir fait découvrir cette solution.

L’équipe Synbioz. Libres d’être ensemble.