Utilisez maintenant ce code (et de nombreuses variantes), mais la piste de défilement prend une couleur gris foncé, similaire à # 222222 ou à celle-ci. Trouvez de nombreux exemples, mais tous donnent le même résultat. Opera, Chrome et firefox affichent ce bogue. Comment réparer?
#style-3::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: transparent;
}
#style-3::-webkit-scrollbar
{
width: 6px;
background-color: transparent;
}
#style-3::-webkit-scrollbar-thumb
{
background-color: #000000;
}
En css pur, il n’est pas possible de le rendre transparent. Vous devez utiliser une image de fond transparente comme ceci:
::-webkit-scrollbar-track-piece:start {
background: transparent url('images/backgrounds/scrollbar.png') repeat-y !important;
}
::-webkit-scrollbar-track-piece:end {
background: transparent url('images/backgrounds/scrollbar.png') repeat-y !important;
}
.scrollable-content {
overflow-x:hidden;
overflow-y:scroll; // manage scrollbar content overflow settings
}
.scrollable-content::-webkit-scrollbar {
width:30px; // manage scrollbar width here
}
.scrollable-content::-webkit-scrollbar * {
background:transparent; // manage scrollbar background color here
}
.scrollable-content::-webkit-scrollbar-thumb {
background:rgba(255,0,0,0.1) !important; // manage scrollbar thumb background color here
}
Essayez celui-ci, cela fonctionne bien pour moi.
En CSS:
::-webkit-scrollbar
{
width: 0px;
}
::-webkit-scrollbar-track-piece
{
background-color: transparent;
-webkit-border-radius: 6px;
}
et voici la démo de travail: https://jsfiddle.net/qzsbf0tm/
Pour contrôler le background-color
de la barre de défilement, vous devez cibler l'élément primaire au lieu de -track
.
::-webkit-scrollbar {
background-color: blue;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
Je n'ai pas réussi à le rendre transparent
, mais j'ai réussi à définir sa couleur.
Comme ceci est limité à webkit, il est toujours préférable d’utiliser js avec une barre de défilement personnalisée polyfill: CSS dans div
Il suffit de régler l'affichage: aucun; en tant qu'attribut dans votre feuille de style;) C'est bien mieux que de charger des images pour rien.
body::-webkit-scrollbar{
width:9px;height:9px;
}
body::-webkit-scrollbar-button:start:decrement,body::-webkit-scrollbar-button:end:increment{
display:block;height:0;background-color:transparent;
}
body::-webkit-scrollbar-track-piece{
background-color:#FFFFFF;
opacity:0.2;
> display:none;
-webkit-border-radius:0;
-webkit-border-bottom-right-radius:14px;
-webkit-border-bottom-left-radius:14px;
}
body::-webkit-scrollbar-thumb:vertical{
height:50px;
background-color:#333333;
-webkit-border-radius:8px;
}