Dans cet article, nous allons plonger dans le monde des barres de défilement. Je sais, cela ne semble pas trop glamour, mais croyez-moi, une page bien conçue va de pair avec une barre de défilement assortie. La barre de défilement chromée à l'ancienne ne convient tout simplement pas autant.
Nous examinerons les moindres détails d'une barre de défilement, puis examinerons quelques exemples intéressants.
Composants d'une barre de défilement
C'est plus un rappel, vraiment. Il y a un tas de messages ici sur CSS-Tricks qui entrent dans les détails en ce qui concerne le style de barre de défilement personnalisé en CSS.
Pour styliser une barre de défilement, vous devez être familiarisé avec l'anatomie d'une barre de défilement. Jetez un oeil à cette illustration:
Les deux principaux éléments à garder à l'esprit ici sont :
- Les suivre est l'arrière-plan sous la barre.
- Les pouce est la partie sur laquelle l'utilisateur clique et fait glisser.
Nous pouvons modifier les propriétés de la barre de défilement complète en utilisant le préfixe du fournisseur::-webkit-scrollbar sélecteur. On peut donner à la barre de défilement une largeur fixe, une couleur de fond, des coins arrondis… plein de choses ! Si nous personnalisons la barre de défilement principale d'une page, nous pouvons utiliser ::-webkit-scrollbar directement sur l'élément HTML :
html::-webkit-scrollbar {
/* Style away! */
}Si nous personnalisons une boîte de défilement qui est le résultat de overflow: scroll, alors nous pouvons utiliser ::-webkit-scrollbar sur cet élément à la place :
.element::-webkit-scrollbar {
/* Style away! */
}Voici un exemple rapide qui stylise la barre de défilement de l'élément HTML afin qu'elle soit large avec un arrière-plan rouge :
Et si nous voulons seulement changer le pouce ou la piste de la barre de défilement ? Vous l'avez deviné - nous avons des pseudo-éléments préfixés spéciaux pour ces deux : ::-webkit-scrollbar-thumb ainsi que ::-webkit-scrollbar-track, respectivement. Voici une idée de ce qui est possible lorsque nous mettons toutes ces choses ensemble :
Assez de brossage ! Je veux vous montrer trois degrés de style de barre de défilement personnalisé, puis ouvrir une grande vitrine d'exemples tirés du Web pour vous inspirer.
Barres de défilement simples et élégantes
Une barre de défilement personnalisée peut toujours être minimale. J'ai rassemblé un groupe d'exemples qui modifient subtilement l'apparence, que ce soit avec un léger changement de couleur sur le pouce ou la piste, ou un style léger sur l'arrière-plan.
Comme vous pouvez le voir, nous n'avons pas à devenir fous en ce qui concerne le style de la barre de défilement. Parfois, un changement subtil suffit pour améliorer l'expérience utilisateur globale avec une barre de défilement qui correspond au thème général.
Barres de défilement accrocheuses
Mais avouons-le : c'est amusant d'aller un peu trop loin et de faire preuve de créativité. Voici quelques barres de défilement étranges et uniques qui pourraient être "trop" dans certains cas, mais elles attirent certainement l'attention.
Un de plus…
Que diriez-vous de prendre la barre de défilement pour un tour dans un train pour le pouce et les pistes pour la, eh bien, la piste !
