web-dev-qa-db-fra.com

Barre de défilement transparente avec css

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;
}
htmlcssscrollbar
16
user3260950

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;
}
11
Antihype Bird
    .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
    }
4
4dgaurav

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/

1
karthik vishnu kumar

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

1
vilsbole

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;
}
0
Dice