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.
Pour suivre le déroulement de cet article, vous aurez besoin de :
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.
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 ».
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
.
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.
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!
Sign up for Infrastructure as a Newsletter.
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.