Salut à tous, c'est Sahaza.
Le diable se cache dans les détails. Vous pouvez avoir le plus beau des designs Glassmorphism (article précédent !) et le code React le plus optimisé du monde, si votre barre de défilement (scrollbar) reste le gris austère et daté des années 2000, l'expérience utilisateur en prend un coup.
Malheureusement, les standards CSS W3C ne nous donnent pas encore de solution universelle propre. Pour l'instant, si vous voulez personnaliser la scrollbar, vous devez passer par les **pseudo-éléments propriétaires Webkit**.
Qu'est-ce que ça veut dire ? Simplement que cette technique fonctionne parfaitement sur Chrome, Safari, Edge et la plupart des navigateurs basés sur Chromium (soit l'écrasante majorité du marché). Firefox a sa propre propriété minimaliste, mais nous allons nous concentrer ici sur le snippet CSS qui vous donne un contrôle total.
Voici le code pur et le guide pour créer une scrollbar qui s'intègre parfaitement à votre thème.
Le Snippet CSS : Scrollbar Customisée pour Webkit
Ce snippet permet de définir la largeur de la barre, de styliser la piste (le fond) et surtout le pouce (la poignée que l'on manipule).
Le Code CSS Complet
/* 1. Définir la largeur de la barre */
::-webkit-scrollbar {
width: 10px; /* Sur l'axe vertical */
height: 10px; /* Sur l'axe horizontal si besoin */
}
/* 2. Styliser la piste (Track) : le fond de la barre */
::-webkit-scrollbar-track {
background: #f1f1f1; /* Gris très clair, s'adapte bien à la plupart des thèmes */
border-radius: 5px; /* Optionnel : bords arrondis */
}
/* 3. Styliser le pouce (Thumb) : la poignée de défilement */
::-webkit-scrollbar-thumb {
background: #6366f1; /* La couleur primaire de votre Snippetothèque (Indigo) */
border-radius: 5px;
border: 2px solid #f1f1f1; /* Crée une petite marge autour du pouce */
}
/* 4. Effet Hover pour le pouce */
::-webkit-scrollbar-thumb:hover {
background: #4f46e5; /* Un Indigo plus foncé au survol */
}
/* 5. Application au BODY ou à un conteneur spécifique */
/* Pour s'appliquer à un seul élément (ex: un bloc de code scrollable) */
.custom-scroll-container::-webkit-scrollbar {
/* ... Reprendre les styles ci-dessus ... */
}
Analyse Technique : Les Pseudo-éléments Clés
La puissance de ce snippet réside dans la compréhension des trois pseudo-éléments principaux fournis par Webkit :
1. `::-webkit-scrollbar`
C'est le sélecteur racine. Il s'applique à la barre de défilement dans son ensemble. C'est ici que vous définissez sa **taille globale** (largeur pour une barre verticale, hauteur pour une barre horizontale). Sans cette étape, le reste ne fonctionnera pas ou sera incohérent.
2. `::-webkit-scrollbar-track`
Représente le **fond** ou la "piste" sur laquelle le pouce se déplace. Je vous conseille d'utiliser une couleur très claire ou très sombre (selon votre thème) et de lui donner un `border-radius` pour un look moderne.
3. `::-webkit-scrollbar-thumb`
C'est l'élément le plus important : le **pouce** ou la poignée de défilement. C'est votre chance de renforcer l'identité visuelle du site. Utilisez la couleur accent (ici, l'Indigo `#6366f1`) et une petite bordure pour la détacher de la piste, donnant un effet 3D subtil.
Le Cas Particulier de Firefox
Si vous supportez Firefox, vous ne pouvez pas utiliser les pseudo-éléments Webkit. Firefox utilise deux propriétés CSS plus simples :
/* Pour la compatibilité Firefox */
.firefox-container {
scrollbar-width: thin; /* 'auto' (par défaut) ou 'thin' */
scrollbar-color: #6366f1 #f1f1f1; /* thumb color track color */
}
L'inconvénient est que scrollbar-width ne permet que `thin` ou `auto`, sans contrôle précis de la taille en pixels. Utilisez la méthode Webkit pour Chrome/Safari/Edge, et la méthode Firefox comme un simple fallback.
En tant qu'Indie Hacker, je pense que ces petits détails font la différence entre un projet amateur et un outil que les gens aiment utiliser. Une scrollbar bien stylisée est un marqueur de qualité. N'hésitez pas à l'appliquer à vos grands conteneurs de code aussi, pour rendre vos snippets encore plus immersifs.
On se retrouve au prochain snippet !
**Sahaza.**