Comment créer un style de barre de défilement avec CSS

Introduction

En septembre 2018, les barres de défilement CSS de W3C ont défini des spécifications pour personnaliser l’apparence des barres de défilement avec CSS.

En 2020, 96 % des utilisateurs d’Internet exécutent des navigateurs qui prennent en charge la création de style de barres de défilement CSS. Cependant, afin de couvrir les navigateurs Blink, WebKit et Firefox, vous devrez écrire deux ensembles de règles CSS.

Au cours de ce tutoriel, vous allez apprendre à utiliser CSS pour personnaliser des barres de défilement qui soient prises en charge par les navigateurs modernes.

Conditions préalables

Pour suivre le déroulement de cet article, vous aurez besoin de :

• Notions sur les concepts de vendor prefixes, pseudo-elements et graceful degradation.

Créer le style des barres de défilement dans Chrome, Edge et Safari

Actuellement, vous pouvez utiliser le pseudo-élément du préfixe vendeur -webkit-scrollbar pour créer le style de vos barres de défilement pour Chrome, Edge et Safari.

Voici un exemple qui utilise les pseudo-éléments ::-webkit-scrollbar, ::-webkit-scrollbar-track et ::webkit-scrollbar-thumb :

body::-webkit-scrollbar {
  width: 12px; /* width of the entire scrollbar */
}

body::-webkit-scrollbar-track {
  background: orange; /* color of the tracking area */
}

body::-webkit-scrollbar-thumb {
  background-color: blue; /* color of the scroll thumb */
  border-radius: 20px; /* roundness of the scroll thumb */
  border: 3px solid orange; /* creates padding around scroll thumb */
}

Voici une capture d’écran de la barre de défilement obtenue avec ces règles CSS :

Ce code fonctionne avec les dernières versions de Chrome, Edge et Safari.

Malheureusement, cette spécification a été officiellement abandonnée par W3C et sera probablement à éviter au fil du temps.

Créer le style des barres de défilement dans Firefox

Actuellement, vous pouvez créer le style des barres de défilement sous Firefox avec les nouveaux CSS Scrollbars.

Voici un exemple qui utilise les propriétés scrollbar-width et scrollbar-color :

body {
  scrollbar-width: thin; /* "auto" or "thin" */
  scrollbar-color: blue orange; /* scroll thumb and track */
}

Voici une capture d’écran de la barre de défilement obtenue avec ces règles CSS :

Cette spécification partage quelques points communs avec la spécification -webkit-scrollbar pour contrôler la couleur de la barre de défilement. Cependant, il n’existe actuellement aucune spécification permettant de modifier le remplissage et l’arrondi de la « piste de défilement ».

Créer des styles de barre de défilement à l’épreuve du temps

Vous pouvez écrire votre CSS de manière à prendre en charge les spécifications -webkit-scrollbar et CSS Scrollbar.

Voici un exemple qui utilise scrollbar-width, scrollbar-color, ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::webkit-scrollbar-thumb :

/* Works on Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: blue orange;
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 12px;
}

*::-webkit-scrollbar-track {
  background: orange;
}

*::-webkit-scrollbar-thumb {
  background-color: blue;
  border-radius: 20px;
  border: 3px solid orange;
}

Les navigateurs Blink et WebKit ignoreront les règles qu’ils ne reconnaitront pas et appliqueront les règles -webkit-scrollbar. Les navigateurs Firefox ignoreront les règles qu’ils ne reconnaitront pas et appliqueront les règles CSS Scrollbars. Une fois que les navigateurs Blink et WebKit ne prendront plus en charge la spécification -webkit-scrollbar, ils reviendront gracieusement à la nouvelle spécification CSS Scrollbars.

Conclusion

Au cours de cet article, vous avez été initié à l’utilisation de CSS pour créer le style des barres de défilement tout en veillant à ce que ces styles soient reconnus par la plupart des navigateurs modernes.

Vous pouvez également simuler une barre de défilement en cachant la barre de défilement par défaut et en utilisant JavaScript pour détecter la hauteur et la position de défilement. Cependant, ces approches présentent des limitations en termes de reproduction d’expériences comme le défilement à inertie (par exemple, mouvement décroissant pendant le défilement avec des pistes de défilement).

Si vous souhaitez en savoir plus sur CSS, veuillez consulter notre page thématique CSS dans laquelle vous trouverez des exercices et des projets de programmation.