Empêcher la scrollbar de modifier de layout d’une page web

Vous l’aurez sûrement remarqué, mais l’apparition d’une barre de défilement dans une page (ou un composant) web peut parfois avoir un impact sur l’organisation de cette dernière.

Cela peut même changer les retours à la ligne d’un texte en pleine lecture, entrainant un impact négatif de l’expérience utilisateur.

Par défaut, même lorsqu’un élément est défini avec overflow: auto , aucune place n’est prévue pour la barre de défilement, et le contenu est simplement déplacé lorsqu’elle apparait.

Heureusement, une nouvelle propriété CSS scrollbar-gutter est apparue pour corriger ce problème et possède trois valeurs possibles :

• auto (défaut)
• stable
• stable both-edges

Voilà un exemple de son utilisation :

p {
  padding: 10px;
  height: 75px;
  width: 250px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

Le résultat ? La place de la barre de défilement est réservée même lorsque cette dernière n’est pas encore affichée, ce qui réduit les modifications visuelles de la page et des textes, comme ceci :

Attention, la différence dépend beaucoup de l’implémentation de la barre de défilement des navigateurs.

Sur certains, la barre de scroll est très fine et la différence est quasi invisible !

La variante both-edges

Garder le même layout c’est bien, mais cela implique un petit défaut visuel…

Lorsque l’on utilise la valeur stable , tant que la barre n’est pas visible, le rendu apparait simplement avec un espace supplémentaire à la droite de votre élément, comme si votre padding était plus grand de 15 pixels à gauche qu’à droite.

Le design est alors vite “déséquilibré”

C’est pour cela qu’on peut ajouter l’option both-edges, comme ceci :

scrollbar-gutter: stable both-edges;

Cela va permettre d’ajouter le même espace à gauche ET à droite pour rééquilibrer les marges.

Un impact positif sur le SEO

On pourrait se demander ce qu’une option visuelle peut avoir comme influence sur le SEO…

Et pourtant, il n’est pas négligeable.

Depuis ses dernières versions, l’algorithme de référencement de Google compte un malus pour les pages ayant un nombre de “Cumulative Layout Shift” ou “CLS” trop important.

Ce chiffre représente simplement le nombre de fois où une page web va modifier son layout lors de son chargement, jusqu’à son affichage “final”.

L’apparition et la disparition d’une scrollbar est comptabilité dans ces “layout shift”

En utilisant la propriété “scrollbar-gutter” permet de diminuer ce chiffre, et donc d’améliorer son référencement (ou plutôt d’éviter de le diminuer).

Compatibilité de la propriété

Le seul bémol de cette solution, est qu’elle n’est pas encore parfaitement compatible avec tous les navigateurs…

En réalité, tous les navigateurs modernes ont implémenté cette propriété CSS, sauf Safari.

Mais bonne nouvelle, il est possible de l’activer manuellement sur les dernières version, ce qui signifie qu’elle est également sur la roadmap des prochaines versions !