Appliquer le style de barre de défilement webkit à l’élément spécifié

Je suis nouveau pour les pseudo-éléments préfixés par deux points. Je suis tombé sur un article de blog sur le style des barres de défilement utilisant certains css de webkit. Le pseudo-élément CSS peut-il être appliqué à des éléments individuels?

/* This works by applying style to all scroll bars in window */ ::-webkit-scrollbar { width: 12px; } /* This does not apply the scrollbar to anything */ div ::-webkit-scrollbar { width: 12px; }

Dans ce violon, je voudrais personnaliser la barre de défilement du div, mais la barre de défilement de la fenêtre principale rest par défaut.

http://jsfiddle.net/mrtsherman/4xMUB/1/

Votre idée était correcte. Cependant, la notation div ::-webkit-scrollbar avec un espace après div est en fait la même chose que div *::-webkit-scrollbar ; ce sélecteur signifie “barre de défilement de tout élément à l’intérieur de

“. Utilisez div::-webkit-scrollbar .

Voir la démo sur http://jsfiddle.net/4xMUB/2/

Je veux utiliser un sélecteur de classe pour utiliser une barre de défilement personnalisée.

Quelque part .foo::-webkit ne fonctionne pas, mais j’ai compris que div.foo::-webkit fonctionne! Ces pseudo-choses ## $$ * ## ….

Voir http://jsfiddle.net/QcqBM/16/

Vous pouvez également appliquer ces règles par id de l’élément. Disons que la barre de défilement d’un div doit être stylée avec un identifiant “myDivId”. Ensuite, vous pouvez faire le suivi. De cette façon, vous pouvez utiliser différents styles pour les barres de défilement des différents éléments.

 #myDivId::-webkit-scrollbar { width: 12px; } #myDivId::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; } #myDivId::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); }

http://jsfiddle.net/QcqBM/516/