Changer la barre de Scroll

Publié le

La barre de défilement est l’un des éléments les plus importants de toute page web, car elle permet aux utilisateurs de naviguer et de consulter le contenu. Grâce à la propriété CSS -webkit-scrollbar, vous pouvez facilement personnaliser la barre de défilement et ajouter des bordures et des couleurs à votre page web.  Voyons ça un peu plus en détails :

scroll-bar-css

Comment personnaliser la barre de scroll en CSS ?

La propriété CSS -webkit-scrollbar permet de modifier la barre de défilement du navigateur. Vous pouvez ajuster la barre de défilement en modifiant les couleurs, les tailles.

Pour ajouter une bordure et modifier la largeur et la couleur, vous pouvez ajouter le code suivant à votre feuille de style :

::-webkit-scrollbar {
  width: 10px; 
  border: 1px solid #ccc; 
}

Vous pouvez également modifier la couleur des boutons et des curseurs en utilisant les propriétés -webkit-scrollbar-thumb et -webkit-scrollbar-button :

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

::-webkit-scrollbar-button {
  background-color: #ccc;
}

Ajouter d'autres propriétés CSS..

Vous pouvez également ajuster la scroll-bar en ajoutant une ombre interne ou ajouter une bordure arrondie. Voici un exemple :

::-webkit-scrollbar {
  width: 10px; 
  border: 1px solid #ccc; 
  border-radius: 5px; 
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2); 
}

Sachez que vous pouvez modifier la scrollbar comme bon vous semble dans l'inspecteur d'élément de Google Chrome ! Il vous suffit simplement d'ajouter des propriétés CSS.

Accessibilité

L'accessibilité est un critère important à considérer lorsque vous modifiez la barre de défilement d'un navigateur.

Pour une meilleure expérience utilisateur veillez à ce que la barre de défilement et les boutons soient suffisamment grands et clairs pour pouvoir être facilement vus et utilisés.

Assurez-vous que votre page web est compatible avec les outils d'accessibilité et que les utilisateurs handicapés peuvent facilement naviguer sur la page.

Utilisez des couleurs contrastées pour les boutons et la barre de défilement afin que les utilisateurs puissent les distinguer facilement sur le fond. Les couleurs claires telles que le blanc, le jaune ou le bleu sont généralement les meilleures. Évitez d'utiliser des couleurs sombres ou des motifs qui pourraient rendre difficile de distinguer la barre de défilement du fond.