Quand vous présentez fièrement votre site internet avec un joli design bien présenté, un élément vient souvent faire tache s’il n’a pas été travaillé : la barre de défilement, ou « scrollbar ».

Nous allons voir dans ce tutoriel comment faire une scrollbar design avec un peu de CSS.

 

Déposez gratuitement votre projet sur Codeur.com, recevez une quinzaine de devis et sélectionnez le développeur web idéal.

Intégration HTML

Personnalisation de page web

Création d'animations CSS

Ajout de formulaires

Trouver un développeur web

Gérer l’affichage de la scrollbar : la propriété « overflow »

La première chose à savoir, c’est qu’une barre de défilement s’affiche par défaut lorsque le contenu (généralement textuel) est plus important que la zone qui la contient. Le meilleur exemple reste la page internet de façon générale : dès que le contenu de la page trop long pour être affiché sur votre navigateur, la barre de défilement apparait à droite de ce dernier.

Il est également possible de générer une barre de défilement sur des éléments autres que la page. À vrai dire, n’importe quel bloc HTML en display: inline-block; ou en display: block; peut recevoir une scrollbar. Comment ? Tout simplement, avec la propriété overflow.

Cette propriété CSS overflow accepte plusieurs valeurs :

  • visible qui affiche tout ce qui sort de la zone, sans scrollbar. Il s’agit de la valeur par défaut sur tous les éléments sauf body et textarea.
  • hidden qui au contraire va masquer ce qui dépasse de la zone, toujours sans scrollbar.
  • scroll force l’affichage de la scrollbar, même si rien ne dépasse de la zone.
  • auto affiche la scrollbar seulement si le contenu dépasse de la zone. Il s’agit de la valeur par défaut pour les éléments sauf body et textarea.

La propriété overflow traite les barres de défilement horizontales et verticales en même temps. Pour les manipuler séparément, il suffit d’ajouter les suffixes -x et -y, qui vont respectivement gérer les barres de défilement horizontales et verticales. Les valeurs de overflow-x et de overflow-y sont les mêmes que pour la propriété overflow, pas d’exception.

Voici un exemple assez complet des différents rendus que l’on peut avoir en jouant sur l’affichage des scrollbars.

Si la génération ou la gestion des barres de défilement vous pose un problème, n’ayez pas peur de demander l’intervention d’un freelance spécialisé. Sur Codeur.com, le dépôt de demande est gratuit.

Trouvez le meilleur développeur web sur Codeur.com

Vos premiers devis en 15 minutes

Gratuit et sans obligation

Déjà plus de 75 000 clients

Trouver un freelance

 

Personnaliser la scrollbar avec CSS

Maintenant que nous avons nos barres de défilement placées au bon endroit et avec un bon comportement, nous allons pouvoir les personnaliser.

Si vous n’avez jamais entendu parler de la guerre des navigateurs, vous allez entrer en plein dedans ! La personnalisation des scrollbars ne fonctionne pas pareil sur tous les navigateurs.
Ce tutoriel explique le fonctionnement et a été testé pour Chrome, Firefox et Edge.

Firefox

Tout d’abord, parlons du navigateur par Mozilla : Firefox. Il s’agit bien du navigateur dont la personnalisation de la scrollbar est la plus simple, mais surtout la moins complète. En effet, vous ne pouvez changer que :

  • la couleur de fond,
  • la couleur de l’ascenseur,
  • choisir sa largeur entre deux dimensions proposées.

Le reste n’est pas modifiable, le logiciel ne le permet pas. Du moins, c’est le cas lors de la rédaction de cet article.

Du coup, nous avons accès à deux propriétés CSS :

  • scrollbar-color: {couleur de l'ascenseur} {couleur de fond};
  • scrollbar-size: none|thin|auto; où none désactive l’affichage de la barre défilement, thin pour la rendre plus fine et auto conserve la largeur par défaut en corrélation avec les configurations du navigateur.
Ces propriétés ne fonctionnent que pour Firefox.

Exemple d’utilisation :

body { /* peut fonctionner sur n'importe quel sélecteur */
  scrollbar-color: #346abf white; /* ascensseur bleu sur fond blanc */
  scrollbar-size: auto; /* largeur par défaut */
}

Webkit (Chrome et Edge)

Plus complexe, mais plus libre, la personnalisation pour Chrome (entre-autres) est différentes.

Il ne s’agit pas ici de propriété CSS mais de pseudo-éléments. Il en existe plusieurs, mais nous allons voir les plus importantes.

Les pseudo-éléments qui suivent servent peuvent suivre un sélecteur (ex : div::) ou ne rien avoir devant pour gérer toutes les scrollbars de la page.

/*Modifier la scrollbar de façon très générale, comme par exemple sa largeur ou sa hauteur pour les scrollbar respectivement verticales et horizontales.*/
::webkit-scrollbar-track {} 

/*Appliquer des modifications sur le fond de la zone de l'ascenseur.*/
::webkit-scrollbar-track {} 

/*Cible l'ascenseur lui-même.*/
::webkit-scrollbar-thumb {} 

/*Concerne seulement des éléments qui peuvent être redimensionnés, comme les textarea.*/
::webkit-scrollbar-corner {} 

/*Boutons en général. Par « bouton », cela sous-entend les flèches à cliquer pour défiler.*/
::webkit-scrollbar-button:single-button {} 

/*Barre verticale, bouton pour remonter.*/
::webkit-scrollbar-button:single-button:vertical:decrement {} 

/*Barre verticale, bouton pour remonter, lorsqu'il est survolé.*/
::webkit-scrollbar-button:single-button:vertical:decrement:hover {} 

/*Barre verticale, bouton pour descendre.*/
::webkit-scrollbar-button:single-button:vertical:increment {} 

/*Barre verticale, bouton pour descendre, quand il est survolé.*/
::webkit-scrollbar-button:single-button:vertical:increment:hover {} 

/*Barre horizontale, bouton pour aller à gauche.*/
::webkit-scrollbar-button:single-button:horizontal:decrement {} 

/*Barre horizontale, bouton pour aller à gauche, une fois survolé.*/
::webkit-scrollbar-button:single-button:horizontal:decrement:hover {} 

/*Barre horizontale, bouton pour aller à droite.*/
::webkit-scrollbar-button:single-button:horizontal:increment {} 

/*Barre horizontale, bouton pour aller à droite, au survol.*/
::webkit-scrollbar-button:single-button:horizontal:increment:hover {}

Exemples d’application

Le plus simple pour comprendre reste de voir directement des exemples d’application.

Voici un premier exemple pour réaliser une scrollbar complexe aux couleurs de Codeur.com.

Un second exemple où le CSS a permis de réaliser une scrollbar simple et moderne.

 

Notre astuce pour personnaliser une scrollbar en CSS

Nous avons vu les différentes propriétés CSS les plus utiles pour permettre la réaliser des scrollbars personnalisées sur votre site internet. N’oubliez d’intégrer les différents codes pour que les barre de défilements adaptées à votre design soient visibles par les divers navigateurs.

Si d’aventure la personnalisation de vos barres de défilement vous donne du fil à retordre, vous pouvez gratuitement publier une annonce sur Codeur.com pour trouver un développeur web prêt à travailler sur votre site.