Tutorial

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

Published on March 19, 2021
authorauthor

William Le and Bradley Kouchi

Français
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 :

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 :

Capture d'écran d'un exemple de page web avec une barre de défilement personnalisée bleue sur un fond orange.

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 :

Capture d'écran d'un exemple de page web avec une barre de défilement personnalisée bleue sur un fond orange.

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.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

About the authors
Default avatar
William Le

author



Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more