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

Question

Je suis nouveau sur les pseudo-éléments qui sont préfixés par un double deux-points. Je suis tombé sur un article de blog discutant du style des barres de défilement à l'aide de certains webkits uniquement css. 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 reste par défaut.

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

Answer 1

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

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

Answer 2

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

D'une manière ou d'une autre, .foo::-webkit ne fonctionne pas, mais j'ai compris que div.foo::-webkit fonctionnait ! Ces ##$$*## pseudo-choses...

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

Answer 3

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 stylisé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/

Answer 4

Vous pouvez avoir un fichier scss et y appliquer le style à une classe

style.scss

 .myscrollbar {
  ::-webkit-scrollbar {
    width: 13px;
    height: 13px;
  }
  ::-webkit-scrollbar-thumb {
    background: linear-gradient(13deg, #f9d4ff 14%, #c7ceff 64%);
    border-radius: 10px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(13deg, #c7ceff 14%, #f9d4ff 64%);
  }
  ::-webkit-scrollbar-track {
    background: #ffffff;
    border-radius: 10px;
    box-shadow: inset 7px 10px 12px #f0f0f0;
  }
}

home.html

 <div class="myscrollbar">
put your contents here
</div>

J'ai utilisé le générateur de barre de défilement ici : https://w3generator.com/scrollbar