Gibt es eine Möglichkeit, transparent zu machen, custom scrollbar-track in webkit-Browsern?

Ich versuche, Stil Scrollbalken, die erscheinen, auf DIV ' s in ein design an dem ich arbeite. Es ist webkit nur so dachte, ich könnte durchaus eine Möglichkeit mit CSS anstatt plugins.

Leider habe ich einen großen hit Problem. Das design erfordert die Bildlaufleisten, um überschneidungen der Inhalte mit einem transparenten Effekt, ähnlich wie bei OS X Mountain Lion /iOS.

Wenn benutzerdefinierte Stile werden angewandt, um die Bildlaufleiste, aber es passt die Größe der Inhalte an die scrollbar in. Ich habe es geschafft, um die Größe des Inhalts so, dass im Bereich "Informationen" zeigt Sie Ihre, unter der scrollbar jetzt, aber ich kann nicht scheinen, um die scrollbar-track transparent.

Habe ich versucht, die Anwendung diese, um sowohl die ::-webkit-scrollbar und ::-webkit-scrollbar-track-Regionen:

  • hintergrund:transparent
  • transparenten hintergrund Farbe mit den rgba -
  • ein Hintergrundbild mit Transparenz

Keiner scheint zu arbeiten. Bevor ich aufgeben und versuchen, eine benutzerdefinierte JavaScript-scrollbar-Lösung, dachte, ich würde sehen, ob jemand hatte eine Antwort.

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>

Ich habe diese bereits:

webkit css scrollbar-styling

Wie Sie verhindern, dass ein webkit-scrollbar vom schieben über den Inhalt eines div?

CSS: es ist Möglich, die "push" - Webkit-scrollbars in Inhalt?

  • Ich bin versucht, dieses problem zu lösen.
  • Haben Sie jemals eine Lösung ? Ich bin versucht zu machen, nur die Spur Stück unsichtbar.
  • Nein, es ist nicht möglich. Die richtige Antwort sehen Sie hier. stackoverflow.com/a/33686575/1008919
InformationsquelleAutor beardofzaius | 2013-01-10
  1. 5

    Habe ich aktualisiert Ihre fiddle-Beispiel -> http://jsfiddle.net/F9p7S/

    Versuchen Sie diesen Ansatz:

    .scrollable-content::-webkit-scrollbar * {
    background:transparent;
}
.scrollable-content::-webkit-scrollbar-thumb {
    background:#999 !important;
}
    • Funktioniert dies nicht.
    • Es funktioniert nicht, wenn der hintergrund hat die Deckkraft (z.B. rgba)
    • Dies funktioniert, gehen Sie zu der Geige und sicherstellen, dass Sie nutzen alle 3 Selektoren (nur 2 hier aufgelistet). Der erste bestimmt die Breite und w/o-es wird dies nicht funktionieren.
    InformationsquelleAutor Mat Bloom
Schreibe einen Kommentar