La personnalisation d’une barre de scroll en CSS dans les navigateurs web et les éléments HTML scrollables est devenue une pratique populaire parmi les développeurs. Cela améliore l’esthétique et l’expérience utilisateur sur les sites web. Nous allons découvrir en détail les techniques pour personnaliser les barres de scroll en CSS avec des propriétés spécifiques, que ce soit pour l’ensemble du navigateur ou pour des éléments HTML possédant une barre de défilement.
Personnaliser la barre de scroll en CSS : Différences entre les navigateurs
La personnalisation de la barre de défilement du navigateur n’est pas possible sur tous les navigateurs. Actuellement, la personnalisation de la barre de défilement est principalement prise en charge par les navigateurs basés sur WebKit, tels que Google Chrome et Safari.
Cette fonctionnalité n’est pas standardisée et n’est pas prise en charge par tous les navigateurs. Firefox, par exemple, ne prend pas en charge la personnalisation de la barre de scroll en CSS du navigateur.
Il est important de noter que la personnalisation de la barre de défilement peut également varier en fonction du système d’exploitation sur lequel le navigateur est exécuté. Par exemple, la personnalisation de la barre de scroll sur Windows peut différer de celle sur macOS ou Linux.
Si vous avez besoin d’une personnalisation de la barre de défilement qui fonctionne sur tous les navigateurs et sur toutes les plates-formes, vous devrez probablement utiliser des solutions alternatives, telles que des bibliothèques JavaScript.
Barre de scroll du navigateur et barre de scroll d’un élément HTML
Il est possible de personnaliser la barre de scroll d’un élément HTML spécifique en utilisant uniquement CSS, et cela fonctionne sur la plupart des navigateurs modernes, y compris Firefox. Contrairement à la personnalisation de la barre de défilement du navigateur lui-même (celle qui apparaît à côté de la fenêtre du navigateur) qui n’est pas prise en charge dans tous les navigateurs, notamment par Firefox.
Faire apparaitre une barre de scroll sur un élément HTML
Pour faire apparaître la barre de défilement sur un élément HTML, vous devez d’abord vous assurer que le contenu de cet élément dépasse sa taille définie. En d’autres termes, si le contenu est plus grand que la taille de l’élément, une barre de défilement apparaîtra automatiquement.
<div class="scrollable">
Contenu long ici ...
</div>Dans l’exemple ci-dessus, nous avons un élément HTML <div> avec la classe .scrollable.
.scrollable {
/* Hauteur de l'élément scrollable */
height: 200px;
/* Afficher la barre de défilement verticale automatiquement si nécessaire */
overflow-y: auto;
}En CSS, nous avons défini une hauteur fixe de 200 pixels pour cet élément. Lorsque le contenu à l’intérieur de cet élément dépasse la hauteur définie, une barre de défilement verticale apparaîtra automatiquement grâce à la propriété overflow-y: auto.
Vous pouvez également utiliser overflow: auto; pour afficher à la fois les barres de scroll horizontale et verticale automatiquement si nécessaire si le contenu de cet élément devait dépasser.
Personnaliser la barre de scroll en CSS des navigateurs basés sur WebKit
La personnalisation de la barre de scroll du navigateur ou d’un élément HTML est une façon de donner une touche distinctive à l’apparence générale d’un site web.
Utilisation des préfixes en CSS
Différents navigateurs ont des préfixes CSS spécifiques pour la personnalisation des barres de défilement. Par exemple, pour les navigateurs basés sur WebKit comme Chrome et Safari, on utilise les préfixes ::-webkit-scrollbar.
/* Style de la barre de défilement */
::-webkit-scrollbar {
width: 10px; /* Largeur de la barre de défilement */
}
/* Style de la poignée de la barre de défilement */
::-webkit-scrollbar-thumb {
background-color: #888; /* Couleur de la poignée */
border-radius: 5px; /* Bordure arrondie pour la poignée */
}
/* Style de la piste de la barre de défilement */
::-webkit-scrollbar-track {
background-color: #f1f1f1; /* Couleur de la piste */
}- ::-webkit-scrollbar : Cette propriété permet de cibler la barre de scroll elle-même. Vous pouvez définir des styles pour la barre de défilement dans son ensemble, tels que sa largeur, sa couleur de fond…
- ::-webkit-scrollbar-thumb : Cette propriété cible la poignée de la barre de scroll, qui est la partie que l’utilisateur peut faire glisser pour faire défiler le contenu. Vous pouvez définir des styles pour la poignée, tels que sa couleur, sa forme…
- ::-webkit-scrollbar-track : Cette propriété cible la piste de la barre de défilement, qui est la zone sur laquelle la poignée se déplace. Vous pouvez définir des styles pour la piste, tels que sa couleur de fond, sa forme…
Pour les navigateurs basés sur WebKit, ce code CSS fonctionne pour la barre de scroll du navigateur comme pour la barre de scroll d’un élément.
Pour l’appliquer uniquement à un élément HTML, vous pouvez lui associer la classe .scrollable :
<div class="scrollable">
Contenu long ici ...
</div>/* Personnalisation de la barre de défilement */
.scrollable::-webkit-scrollbar {
width: 10px; /* Largeur de la barre de défilement */
}
.scrollable::-webkit-scrollbar-thumb {
background-color: #888; /* Couleur de la poignée */
border-radius: 5px; /* Bordure arrondie pour la poignée */
}
.scrollable::-webkit-scrollbar-track {
background-color: #f1f1f1; /* Couleur de la piste */
}Personnaliser la barre de scroll en CSS d’un élément HTML avec Firefox
D’autres propriétés sont utilisées pour personnaliser la barre de scroll en CSS pour un élément scrollable dans firefox :
/* Èlément scrollable depuis Firefox */
.scrollable {
overflow-y: scroll; /* Assure que la barre de défilement s'affiche uniquement si nécessaire */
height: 200px; /* Hauteur de l'élément scrollable */
}
/* Personnalisation de la barre de défilement pour Firefox */
.scrollable {
scrollbar-width: thin; /* Largeur de la barre de défilement */
scrollbar-color: green; /* Couleur de la poignée */
}- scrollbar-width : Cette propriété CSS définit la largeur de la barre de scroll sur un élément scrollable.
- scrollbar-color : Cette propriété CSS définit la couleur de la poignée et de la piste de la barre de défilement sur un élément scrollable.
La personnalisation des barres de scroll en CSS dans les navigateurs web peut ajouter une touche de créativité et d’originalité à vos projets web. Attention à la compatibilité entre les navigateurs !
