Barre de défilement - Astuces CSS

Une brève histoire des barres de défilement de style:

C'était une chose que seul Internet Explorer pouvait faire (versions anciennes) avec des trucs comme -ms-scrollbar-base-color. Celles-ci n'existent plus.
Ensuite, les moteurs de navigation basés sur WebKit se sont intégrés à des trucs comme ::-webkit-scrollbar. C'est ce que couvre principalement cette entrée d'Alamanac, car elle fonctionne dans le paysage Safari / Chrome aujourd'hui.
Les normes ont finalement été impliquées, et ces options de style sont couvertes par des propriétés non préfixées telles que scrollbar-color et scrollbar-width.

Les barres de défilement de style pour le monde Safari / Chrome sont exposées derrière le -webkitpréfixe du fournisseur.

Cette entrée d'almanach est un aperçu, pour une description plus complète de l'utilisation des barres de défilement personnalisées, veuillez lire cet article CSS-Tricks.

body::-webkit-scrollbar ( width: 1em; ) body::-webkit-scrollbar-track ( box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); ) body::-webkit-scrollbar-thumb ( background-color: darkgrey; outline: 1px solid slategrey; )

La -webkit-scrollbarfamille de propriétés se compose de sept pseudo-éléments différents qui, ensemble, constituent un élément d'interface utilisateur de barre de défilement complet:

::-webkit-scrollbaraborde l'arrière-plan du bar lui-même. Il est généralement couvert par les autres éléments
::-webkit-scrollbar-button adresse les boutons directionnels de la barre de défilement
::-webkit-scrollbar-track adresse l'espace vide «sous» la barre de progression
::-webkit-scrollbar-track-piece est le calque le plus haut de la barre de progression non couvert par l'élément de défilement déplaçable (pouce)
::-webkit-scrollbar-thumb adresse l'élément de défilement déplaçable qui se redimensionne en fonction de la taille de l'élément de défilement
::-webkit-scrollbar-corner adresse le coin inférieur (généralement) de l'élément déroulant, là où deux barres de défilement peuvent se rencontrer
::-webkit-resizeradresse la poignée de redimensionnement déplaçable qui apparaît au-dessus du scrollbar-cornercoin inférieur de certains éléments

En plus de ces pseudo-éléments, il existe également onze classes de pseudo-sélecteurs qui ne sont pas obligatoires, mais qui permettent aux concepteurs de styliser divers états et interactions de l'interface utilisateur de la barre de défilement. Une description complète de ces pseudo-sélecteurs, ainsi qu'un exemple détaillé, peuvent être trouvés dans cet article CSS-Tricks.

Découvrez ce stylo!

Points d'interêts

S'il n'y a pas de sélecteur de qualification précédant les différents pseudo-éléments, les styles s'appliqueront à n'importe quelle barre de défilement pouvant apparaître sur la page.
La définition de -webkit-scrollbarstyles est un bon moyen de forcer votre page Web à afficher des barres de défilement horizontales ou verticales sur les versions de Mac OS plus récentes que Lion, sur lesquelles les barres de défilement sont généralement masquées par défaut.
Puisque cette propriété est derrière un -webkitpréfixe de fournisseur, plusieurs plugins jQuery ont été écrits dans «polyfill» ou étendent cette fonctionnalité à d'autres navigateurs. Un de ces plugins est jScrollPane.

Prise en charge du navigateur

Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.