web-dev-qa-db-fra.com

Appliquer le style de barre de défilement du kit Web à l'élément spécifié

Je suis nouveau dans les pseudo-éléments qui sont préfixés par un double colon. Je suis tombé sur un article de blog sur le style des barres de défilement en utilisant uniquement des CSS 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 de la div, mais la barre de défilement de la fenêtre principale reste par défaut.

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

csswebkitpseudo-element
62
mrtsherman

Votre idée était correcte. Cependant, la notation div ::-webkit-scrollbar avec un espace après div est en fait identique à div *::-webkit-scrollbar; ce sélecteur signifie "barre de défilement de tout élément à l'intérieur de <div>". Utilisation div::-webkit-scrollbar.

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

85
duri

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

En quelque sorte .foo::-webkit ne fonctionne pas, mais j'ai compris que div.foo::-webkit ça marche! Ces ## $$ * ## pseudo-choses ....

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

29
Michel Löhr

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 ce qui suit. De cette façon, vous pouvez utiliser différents styles pour les barres de défilement de 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/

7
Pratik Patel