La barre de défilement grise par défaut du navigateur, c’est un peu comme une carte de visite réalisée avec un créateur de site gratuit: ça fait le job, mais l’impression reste médiocre. Cela se remarque d’autant plus quand l’ensemble du site est parfait au pixel près, que les polices sont soigneusement choisies, les couleurs peaufinées, et qu’on voit dépasser sur la droite cette barre anguleuse tout droit sortie de l’ère Internet Explorer.

Les développeurs évitent souvent le sujet. Non pas parce que c’est compliqué, quatre lignes de CSS règlent le problème. Ce sont plutôt des idées reçues qui freinent: «ça ne marche que sur Chrome», «les utilisateurs ne le remarqueront pas», «c’est un gadget, pas un truc de production».

En réalité, le standard W3C couvre l’essentiel avec deux propriétés, et les pseudo-éléments WebKit vous donnent le contrôle sur chaque détail, de l’arrondi au dégradé. J’ai compilé les deux approches dans un seul tutoriel: de la spécification jusqu’à un code prêt pour la production et compatible tous navigateurs, que vous n’aurez pas honte de mettre en ligne.

💡 Aperçu rapide:

• Configurez la barre de défilement avec scrollbar-width et scrollbar-color: deux lignes, compatibilité totale entre navigateurs, sans préfixe.
• Maîtrisez ::-webkit-scrollbar et ses descendants pour un contrôle fin de la piste, du curseur et des coins.
• Construisez une solution multi-navigateurs: le standard pour Firefox, les pseudo-éléments pour Chrome/Safari/Edge, sans conflit.
• Passez en revue les erreurs courantes: spécificité, accessibilité, boutons oubliés, pièges sur mobile.

Pourquoi styliser la barre de défilement

Le premier argument, et le principal, c’est la cohérence visuelle. Imaginez une landing page sombre avec des accents néon et une barre de défilement blanc éclatant sur la droite. Ou un site minimaliste clair où la barre de défilement est le seul élément qui casse la palette de couleurs. Techniquement, ce n’est pas un bug, mais visuellement, ça fait inachevé.

Le deuxième point, c’est l’image de marque. Une barre de défilement colorée devient un élément du langage visuel: un curseur vert pour un service de livraison de repas sains, orange pour une plateforme de réservation. Un petit détail qui renforce l’association sans bannière ni popup supplémentaire.

Troisièmement, la gestion de l’attention. Une barre de défilement fine et semi-transparente ne détourne pas l’attention du contenu. Sur les longues landing pages, une barre étroite ne grignote pas visuellement de précieux pixels en largeur, et sur les mises en page mobiles avec des marges latérales, chaque pixel compte.

Et le point clé: ce n’est pas un truc de geek. Les propriétés scrollbar-width et scrollbar-color font partie de la spécification CSS Scrollbars Styling Module Level 1 et sont prises en charge par tous les navigateurs actuels. Selon les données de Can I Use de juin 2026, la couverture des propriétés standard dépasse 95% des utilisateurs, l’époque des préfixes vendeur pour les barres de défilement est révolue.

Approche standard: scrollbar-width et scrollbar-color

La méthode la plus simple et la plus fiable. Deux propriétés sans préfixe, une syntaxe claire, cela fonctionne sur Firefox, Chrome, Edge et Safari.

Syntaxe de base

1
body {
2
  scrollbar-width: thin;
3
  scrollbar-color: #4a90d9 #f0f0f0;
4
}

La première valeur de scrollbar-color est la couleur du curseur, la seconde celle de la piste. La propriété scrollbar-width accepte trois valeurs:

• auto, largeur standard (environ 17px sous Windows, 15px sous macOS avec une souris);
• thin, barre de défilement fine (environ 8px);
• none, masque complètement la barre (le défilement fonctionne toujours, mais l’utilisateur peut ne pas se rendre compte que le contenu défile, à utiliser avec précaution).

Exemple pour un thème sombre

1
html {
2
  scrollbar-width: thin;
3
  scrollbar-color: #555 #1e1e1e;
4
}

Résultat: une piste sombre assortie à la couleur de fond et un curseur gris. Rien ne casse la palette, deux lignes de code.

Limites de l’approche standard

La spécification est volontairement minimaliste: on ne peut pas définir de rayon de bordure, d’ombre, de dégradé ni d’effet au survol. C’est un compromis entre personnalisation et préservation de l’utilisabilité, une barre de défilement trop éloignée du standard casse le modèle d’interaction familier. Si le jeu de propriétés standard ne suffit pas, on connecte les pseudo-éléments WebKit.

Réglage fin avec::-webkit-scrollbar

Le jeu de pseudo-éléments ::-webkit-scrollbar-* ne fait pas partie du standard W3C, mais il est pris en charge par les navigateurs WebKit et Blink: Chrome, Edge, Safari, Opera, Brave, Arc. La couverture, selon les statistiques de Can I Use, représente la grande majorité des utilisateurs desktop.

Architecture de la barre de défilement dans WebKit

Une barre de défilement de navigateur se compose de sept parties, chacune avec son propre pseudo-élément:

En pratique, la grande majorité des besoins se règlent avec trois d’entre eux: scrollbar, track et thumb. Les autres servent pour des choix de design spécifiques.

Exemple: une barre de défilement soignée pour un blog

1
::-webkit-scrollbar {
2
  width: 6px;
3
}
4
 
5
::-webkit-scrollbar-track {
6
  background: transparent;
7
}
8
 
9
::-webkit-scrollbar-thumb {
10
  background: #c1c1c1;
11
  border-radius: 3px;
12
}
13
 
14
::-webkit-scrollbar-thumb:hover {
15
  background: #a0a0a0;
16
}

Six pixels de large, une piste transparente (invisible sans défilement), un curseur arrondi qui s’assombrit au survol. La barre de défilement ne se fait pas remarquer, mais elle a un rendu moderne.

Exemple avec un dégradé pour une landing page

1
::-webkit-scrollbar {
2
  width: 8px;
3
}
4
 
5
::-webkit-scrollbar-track {
6
  background: #1a1a2e;
7
  border-radius: 4px;
8
}
9
 
10
::-webkit-scrollbar-thumb {
11
  background: linear-gradient(180deg, #e94560, #0f3460);
12
  border-radius: 4px;
13
  border: 1px solid #16213e;
14
}
15
 
16
::-webkit-scrollbar-thumb:hover {
17
  background: linear-gradient(180deg, #ff6b81, #1a508b);
18
}

Un dégradé vertical sur le curseur, une piste sombre, une fine bordure pour le détacher du fond. Trois lignes supplémentaires par rapport à la base, la page donne une tout autre impression.

Masquer la barre de défilement sans perdre le défilement

Technique classique pour les fenêtres modales et les menus burger:

1
.hide-scrollbar {
2
  overflow-y: scroll;
3
  scrollbar-width: none;
4
}
5
 
6
.hide-scrollbar::-webkit-scrollbar {
7
  display: none;
8
}

Le conteneur reste défilable, mais la barre disparaît aussi bien dans Firefox (scrollbar-width: none) que dans les navigateurs WebKit (display: none sur ::-webkit-scrollbar lui-même).

Solution multi-navigateurs

Combinez le standard et les pseudo-éléments dans un seul bloc, la couverture est quasi complète:

1
/* W3C standard — Firefox, modern Chrome/Edge/Safari */
2
html {
3
  scrollbar-width: thin;
4
  scrollbar-color: #888 #f1f1f1;
5
}
6
 
7
/* WebKit pseudo-elements — detailed styling for Chrome/Safari/Edge */
8
::-webkit-scrollbar {
9
  width: 8px;
10
}
11
 
12
::-webkit-scrollbar-track {
13
  background: #f1f1f1;
14
  border-radius: 4px;
15
}
16
 
17
::-webkit-scrollbar-thumb {
18
  background: #888;
19
  border-radius: 4px;
20
}
21
 
22
::-webkit-scrollbar-thumb:hover {
23
  background: #555;
24
}

L’ordre a son importance: d’abord les propriétés standard, puis les pseudo-éléments. Les navigateurs qui prennent en charge le standard appliquent scrollbar-color et ignorent ::-webkit-scrollbar-*, comme l’exige la spécification. Les navigateurs sans prise en charge du standard utilisent les pseudo-éléments. Aucun conflit ne se produit.

Où insérer le code

Trois options, de la plus simple à la plus flexible:

• Globalement dans le fichier style.css du thème. Convient si le style de la barre de défilement est le même pour tout le site. Inconvénient: les modifications seront perdues lors de la mise à jour du thème.
• Dans la section «CSS additionnel» de l’outil de personnalisation. Chemin: Apparence → Personnaliser → CSS additionnel. Méthode sûre pour WordPress: les styles vivent dans les réglages du thème et ne sont pas réinitialisés lors d’une mise à jour.
• Via un plugin comme Code Snippets. Si vous avez besoin de définir spécifiquement la barre de défilement pour certaines pages via des classes CSS.

Dans un thème enfant, les styles sont connectés via un fichier séparé en utilisant wp_enqueue_scripts avec le hook wp_head.

Erreurs courantes lors du stylisme

Oubli de la compatibilité multi-navigateurs. On définit seulement ::-webkit-scrollbar, la barre par défaut reste dans Firefox. Ajoutez toujours scrollbar-width et scrollbar-color en paire au-dessus dans le code.

Barre de défilement trop fine. À 2-3px de largeur dans ::-webkit-scrollbar, cliquer sur le curseur avec la souris devient un exercice de motricité fine. Particulièrement critique sur les ordinateurs portables sans souris externe. La largeur minimale confortable est de 6px.

Contraste nul. Un curseur gris sur une piste grise se fond en une seule masse. Le contraste de couleur minimum entre le curseur et la piste est de 3:1, une exigence WCAG 2.1 AA pour les éléments d’interface.

Surcharge inutile de tous les pseudo-éléments. Le code gonfle, pour zéro effet. Dans la plupart des cas, scrollbar, track et thumb suffisent. On touche aux boutons (button) et au coin (corner) seulement si le design l’exige vraiment.

Fuite du style sur tout le body. Appliquer sur * ou html sans restriction stylise aussi les barres de défilement internes: champs texte, blocs de code, listes déroulantes. Pour les aperçus de code, c’est presque toujours inutile. Utilisez des sélecteurs de classe: .custom-scrollbar-area::-webkit-scrollbar.

⁉️🤔 Foire aux questions

Le stylisme de la barre de défilement fonctionne-t-il sur les appareils mobiles?

Non, sur les navigateurs mobiles, la barre de défilement ne s’affiche pas de manière statique, elle n’apparaît que pendant le défilement et elle est contrôlée par le système d’exploitation. Le stylisme CSS ne s’applique pas sur iOS et Android. Mais ce n’est pas un problème: sur mobile, la barre de défilement n’est pas un élément d’interface permanent. Vérifié sur Safari iOS 18 et Chrome Android 15, les styles personnalisés sont ignorés, l’indicateur système est utilisé. Sur les tablettes avec un clavier externe, la barre de défilement peut s’afficher en permanence, et les styles fonctionnent.

Comment styliser la barre de défilement horizontale séparément de la verticale?

Via les pseudo-éléments avec préfixe de direction: ::-webkit-scrollbar-horizontal et ::-webkit-scrollbar-vertical. En pratique, ils sont rarement utilisés, leur prise en charge est moins bonne que celle des pseudo-éléments principaux. Il est plus fiable d’attacher les styles à un conteneur spécifique avec le type de défilement voulu via un sélecteur de classe. Pour un défilement horizontal à l’intérieur d’un bloc de code: .code-block::-webkit-scrollbar { height: 4px; } définit la hauteur de la barre horizontale, et .code-block::-webkit-scrollbar-thumb { background: #666; } stylise le curseur. Les propriétés standard scrollbar-width et scrollbar-color fonctionnent de la même manière pour les deux directions.

Peut-on animer la barre de défilement au survol?

Oui, via transition sur ::-webkit-scrollbar-thumb. Mais la prise en charge de transition sur les pseudo-éléments est incomplète: Chrome et Edge fonctionnent, Safari peut avoir des saccades. On utilise donc plus souvent un changement de couleur via :hover sans animation, c’est plus fiable et le rendu est propre. Variante fonctionnelle: ::-webkit-scrollbar-thumb { transition: background 0.2s ease; } change en douceur la couleur du curseur. N’appliquez pas de transition sur width: changer la largeur de la barre au survol décale le contenu et c’est agaçant.

Comment styliser la barre de défilement à l’intérieur d’un bloc spécifique, et non de la page entière?

Utilisez un sélecteur composé: .sidebar::-webkit-scrollbar { width: 5px; }, .sidebar::-webkit-scrollbar-thumb { background: #aaa; }. Pour les propriétés standard: .sidebar { scrollbar-width: thin; scrollbar-color: #aaa transparent; }. Fonctionne pour tout conteneur avec overflow-y: auto ou overflow-y: scroll. N’utilisez pas le sélecteur * pour la barre de défilement, cela affectera les champs texte et les listes déroulantes.

Est-il obligatoire de dupliquer les styles pour ::-webkit-scrollbar et les propriétés standard?

Oui, si la compatibilité multi-navigateurs est nécessaire. Firefox utilise uniquement scrollbar-width et scrollbar-color, en ignorant les pseudo-éléments. Chrome et Edge à partir de la version 121 prennent en charge les deux mécanismes, mais appliquent les propriétés standard en priorité, les pseudo-éléments y servent de solution de repli pour les anciennes versions. Quatre lignes de code (deux pour le standard, deux pour WebKit) couvrent tous les navigateurs sans conflit.

Vaut-il la peine de styliser la barre de défilement en 2026

Certainement oui, si vous construisez un site public. Deux lignes de CSS standard vous donnent une barre de défilement soignée qui ne casse pas le design et ne nécessite aucun polyfill. Pour les landing pages et les projets de marque, les pseudo-éléments WebKit ajoutent une touche de personnalité sans nuire à la performance.

La règle principale est de ne pas en faire trop. La barre de défilement reste un élément d’interface fonctionnel, pas une toile pour expérimenter. Largeur minimale de 6px, contraste d’au moins 3:1, pas d’animation de largeur, et l’utilisateur ne remarquera même pas que la barre de défilement est stylisée. Et c’est justement la marque d’un bon travail.

Si le site est sous WordPress, glissez le code dans les styles additionnels de l’outil de personnalisation, cela prend une minute. Le résultat vous suivra à travers les mises à jour du thème et fera plaisir aux yeux de tous ceux qui font défiler la page jusqu’au bout.