CSS - Barres de défilement : Un guide pour débutants

Salut à toi, futurs magiciens du design web ! Aujourd'hui, nous allons plonger dans le monde magique des barres de défilement CSS. Ne t'inquiète pas si tu n'as jamais écrit une ligne de code auparavant - je serai ton guide amical tout au long de ce voyage, et à la fin, tu styliseras les barres de défilement comme un pro !

Table des matières

1. Introduction aux barres de défilement
2. Comment styliser les barres de défilement ?
3. Sélecteurs de barres de défilement
4. Créer une barre de défilement personnalisée
5. Styliser une barre de défilement CSS
6. Propriétés CSS liées aux barres de défilement

Introduction aux barres de défilement

Avant de rentrer dans les détails, parlons des barres de défilement. Tu les as vues tous les jours en naviguant sur le web - ce sont ces petites barres sur le côté ou en bas d'une page web qui te permettent de faire défiler vers le haut, le bas, la gauche ou la droite lorsque le contenu est trop grand pour tenir sur ton écran en une seule fois.

Imagine maintenant si tu pouvais波动 une baguette magique et changer l'apparence de ces barres de défilement. Eh bien, c'est exactement ce que nous allons apprendre aujourd'hui avec CSS !

Comment styliser les barres de défilement ?

Styliser les barres de défilement avec CSS, c'est comme donner un lifting à ta page web. C'est un moyen de faire ressortir ton site et de fournir une expérience utilisateur unique. Commençons avec un exemple simple :

/* Cela s'applique à tout le corps de ta page web */
body::-webkit-scrollbar {
width: 12px;               /* largeur totale de la barre de défilement */
}

body::-webkit-scrollbar-track {
background: orange;        /* couleur de la zone de suivi */
}

body::-webkit-scrollbar-thumb {
background-color: blue;    /* couleur de la poignée de défilement */
border-radius: 20px;       /* arrondi de la poignée de défilement */
border: 3px solid orange;  /* crée un padding autour de la poignée de défilement */
}

Dans cet exemple, nous disons au navigateur de :

1. Rendre la barre de défilement de 12 pixels de large
2. Colorer la zone de suivi (la zone sur laquelle la poignée glisse) en orange
3. Rendre la poignée (la partie que tu saisisses pour faire défiler) bleue
4. Donner des coins arrondis à la poignée
5. Ajouter une bordure orange autour de la poignée

Sympa, non ? Mais attend, il y a plus !

Sélecteurs de barres de défilement

Pour styliser les barres de défilement, nous utilisons des sélecteurs spéciaux. Pense à eux comme des mots magiques qui disent à CSS quelle partie de la barre de défilement modifier. Voici les principaux :

Sélecteur	Description
::-webkit-scrollbar	Stylise la barre de défilement entière
::-webkit-scrollbar-button	Stylise les boutons de la barre de défilement (flèches pointant vers le haut et vers le bas)
::-webkit-scrollbar-track	Stylise la piste (barre de progression) de la barre de défilement
::-webkit-scrollbar-track-piece	Stylise la partie de la piste (barre de progression) non couverte par la poignée
::-webkit-scrollbar-thumb	Stylise la poignée de défilement glissante
::-webkit-scrollbar-corner	Stylise le coin inférieur de la barre de défilement, où se rejoignent les barres de défilement horizontale et verticale
::-webkit-resizer	Stylise la poignée de redimensionnement qui apparaît dans le coin inférieur de certains éléments

Créer une barre de défilement personnalisée

Maintenant que nous connaissons nos mots magiques (sélecteurs), créons une barre de défilement fun et personnalisée :

/* Faisons une barre de défilement néon ! */
.neon-scroll::-webkit-scrollbar {
width: 16px;
}

.neon-scroll::-webkit-scrollbar-track {
background: #000000;
box-shadow: inset 0 0 5px grey;
}

.neon-scroll::-webkit-scrollbar-thumb {
background: linear-gradient(#00ff00, #ff00ff);
border-radius: 10px;
}

.neon-scroll::-webkit-scrollbar-thumb:hover {
background: linear-gradient(#ff00ff, #00ff00);
}

Dans cet exemple, nous avons créé une barre de défilement qui ressemble à quelque chose de cyberpunk ! La piste est noire avec une ombre intérieure subtile, et la poignée a un dégradé qui change lorsque tu passes dessus. Applique cette classe à n'importe quel élément avec un débordement, et observe la magie opérer !

Styliser une barre de défilement CSS

Décomposons le processus de stylisation d'une barre de défilement en étapes :

1. Choisis ta cible : Décide si tu veux styliser la barre de défilement pour toute la page (utilise body) ou juste un élément spécifique (utilise une classe ou un ID).

2. Définis la largeur : Utilise le sélecteur ::-webkit-scrollbar pour définir la largeur globale de la barre de défilement.

3. Stylise la piste : Utilise ::-webkit-scrollbar-track pour définir le fond, ajouter des ombres ou d'autres styles à la piste.

4. Conçois la poignée : Utilise ::-webkit-scrollbar-thumb pour styliser la partie glissante de la barre de défilement. C'est là que tu peux être créatif avec les couleurs, les dégradés et les formes.

5. Ajoute de l'interactivité : Utilise des pseudo-classes comme :hover ou :active pour changer l'apparence de la barre de défilement lorsque les utilisateurs interagissent avec elle.

Voici un exemple regroupant tout :

.cool-scroll {
height: 300px;
overflow-y: scroll;
}

.cool-scroll::-webkit-scrollbar {
width: 14px;
}

.cool-scroll::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}

.cool-scroll::-webkit-scrollbar-thumb {
background: #888;
border-radius: 10px;
}

.cool-scroll::-webkit-scrollbar-thumb:hover {
background: #555;
}

Cela crée une barre de défilement élégante et moderne pour n'importe quel élément avec la classe cool-scroll. La barre de défilement est un peu plus large que par défaut, a des coins arrondis et s'assombrit lorsque tu passes dessus.

Propriétés CSS liées aux barres de défilement

Bien que nous nous soyons concentrés sur les navigateurs WebKit (comme Chrome et Safari), il existe des propriétés CSS standard qui fonctionnent sur différents navigateurs. Voici un tableau de ces propriétés :

Propriété	Description
scrollbar-width	Définit la largeur de la barre de défilement (uniquement pour Firefox)
scrollbar-color	Définit la couleur de la barre de défilement (uniquement pour Firefox)
overflow	Spécifie ce qu'il faut faire si le contenu déborde de la boîte de l'élément
overflow-x	Spécifie ce qu'il faut faire avec les bords gauche/droite du contenu s'il déborde de la zone de contenu de l'élément
overflow-y	Spécifie ce qu'il faut faire avec les bords haut/bas du contenu s'il déborde de la zone de contenu de l'élément

Voici comment tu pourrais les utiliser :

/* Pour Firefox */
* {
scrollbar-width: fine;
scrollbar-color: #888 #f1f1f1;
}

/* Pour les autres navigateurs */
*::-webkit-scrollbar {
width: 12px;
}

*::-webkit-scrollbar-track {
background: #f1f1f1;
}

*::-webkit-scrollbar-thumb {
background-color: #888;
}

Ce code met en place un style de barre de défilement cohérent sur différents navigateurs. Il est fin, avec une piste claire et une poignée plus sombre.

Et voilà, les amis ! Tu viens de monter en niveau tes compétences CSS et d'apprendre à styliser les barres de défilement. Souviens-toi, avec grand pouvoir vient grande responsabilité - utilise ces techniques avec sagesse pour améliorer l'expérience utilisateur, pas pour créer des interfaces distrayantes ou difficiles à utiliser.

Continue à expérimenter, continue à apprendre, et surtout, amuse-toi bien ! Qui sait, peut-être que la prochaine grande tendance en design web sera ta barre de défilement unique. Bon codage !

Credits: Image by storyset