Est-il un moyen de rendre transparent personnalisé de barre de défilement de la piste dans les navigateurs webkit?

Je suis en train de style des barres de défilement qui apparaissent sur les DIV dans une conception que je suis en train de travailler sur. C'est webkit seulement donc pensé que je pourrais obtenir assez juste CSS plutôt que des plugins.

Malheureusement, j'ai frappé un problème majeur. La conception nécessite des barres de défilement pour chevaucher le contenu avec un effet transparent, un peu comme OS X Mountain Lion /iOS.

Lorsque des styles personnalisés sont appliquées à la barre de défilement cependant il redimensionne le contenu à afficher la barre de défilement dans. J'ai réussi à la taille du contenu, de sorte que, dans l'inspecteur s'affiche sous la barre de défilement maintenant, mais je n'arrive pas à faire la barre de défilement de la piste transparent.

J'ai essayé l'application de ces deux la ::-webkit-scrollbar et ::-webkit-scrollbar-track régions:

  • de fond:transparent
  • arrière-plan transparent de couleur avec rgba
  • une image de fond avec la transparence

Aucune ne semble fonctionner. Avant de m'abandonner et essayer un JavaScript personnalisé de barre de défilement solution, j'ai pensé voir si quelqu'un d'autre a une réponse.

CSS:

* {
  list-style:none;
  margin:0;
  padding:0;
}
body {
  padding:20px;
}
#content {
  background:#333;
  height:400px;
  padding:1px;
  width:398px;
}
#content li {
  background:#666;
  height:100px;
  margin-bottom:10px;
  width:400px;
}
.scrollable-content {
  overflow-x:hidden;
  overflow-y:scroll;
}
.scrollable-content::-webkit-scrollbar {
  background:transparent;
  width:30px;
}
.scrollable-content::-webkit-scrollbar-track {
  background:transparent;
}
.scrollable-content::-webkit-scrollbar-thumb {
  background:#999;
}

HTML:

<ol class="scrollable-content" id="content">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ol>

J'ai vérifié ces déjà:

webkit css scrollbar style

Comment empêcher un webkit-scrollbar en poussant sur le contenu d'un div?

CSS: Possible de "pousser" Webkit barres de défilement dans le contenu?

  • Je suis en train d'essayer de résoudre le même problème.
  • Avez-vous jamais trouver une solution de contournement ? Je suis en train de faire juste de la piste de morceau invisible.
  • Non, il n'est pas possible. Voir la réponse correcte ici. stackoverflow.com/a/33686575/1008919
InformationsquelleAutor beardofzaius | 2013-01-10