webkit css scrollbar-styling

Gibt es eine Möglichkeit, loszuwerden der scroll-track vollständig? Oder es überlagern sich die Inhalte, anstatt es beiseite zu schieben? Wie iOS/Lion-scrollbars?

Folgenden wird ziemlich nah, aber obwohl die Strecke transparent ist, wird der Inhalt des scrollbaren region ist über geschoben und den hintergrund der Seite sehen kann. 

::-webkit-scrollbar {  
    width:8px;
    height:8px;
    -webkit-border-radius: 4px;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece {
    background-color:transparent;
}

::-webkit-scrollbar-thumb {  
    background-color: rgba(053, 057, 071, 0.3);
    width: 6px;
    height: 6px;
    -webkit-border-radius:4px;
}
  • Warum nicht verwenden Sie eine benutzerdefinierte Scrollbalken, wie die jQuery-basierte jScrollPane? Sie können es Stil zu legen, über die Inhalte, wenn Sie wollen.
  • Ich habe versucht, jScrollPane, sowie einige meiner eigenen Lösungen mit css3 übersetzt, css Positionen, etc... keine ist so schnell wie eine tatsächliche scrollbar. Es scheint nur, wie viel der zusätzliche Aufwand für etwas, das bereits in den browser. Wenn es möglich ist, verwenden Sie die vorhandene Scrollbalken statt javascript fake, es scheint wie eine bessere Idee.
  • Ich habe festgestellt, baijs.nl/tinyscrollbar gut zu funktionieren und ist schnell (in Bezug auf die Reaktion der Inhalte auf den Blättern) und sehr einfach einzurichten.
  • Sie cam geben margin-right as-8px, wo Sie die Bildlaufleiste, neigt zu erscheinen. aber dies ist mehr ein hack Weg, aber es sollte Euch gehen.
InformationsquelleAutor nicholas | 2011-08-28
  1. 1

    Hmm, ich dachte, ich antwortete das man früher, vielleicht auch nicht:

    • Ausblenden der überlauf auf den Körper
    • wickeln Sie den gesamten Inhalt der Website oder was auch immer du bist, das scrollen mit div,
    • Einbauen css-Eigenschaften für die
      div (overflow:scroll oder overflow-y:scroll).

    Sofort können Sie die Strecke von css, um mögliche Unklarheiten mit rgba(0,0,0,0.3) weil das scrollen ist nicht Teil des Körpers.

    Anderen Tipp für customizing firefox Bildlaufleiste an, wenn Sie Experimentieren wollen, ist:

    • Tun der overflow-Sache und die overlay-scrollbar (per z-index) mit einem transparenten div-gleich welcher Farbe, die Sie mögen,
    • Position der div über den gesamten scroll-Bereich (wahrscheinlich so etwas wie position:absolute; right:0; wenn Sie die schriftrolle für das gesamte Fenster)
    • Verwenden pointer-events: none; auf die divs mit css zu machen, semi-transparent.

    Wird es geben, die firefox scrollen Sie ein wenig Farbe/textur. (Kann sein, ideal, um Kraft, die nach rechts scrollen, für die Vergleichbarkeit)

    Habe ich es noch nicht versucht, aber es ' s tun-in der Lage

    • Ich bin mir nicht sicher, ob ich verstehe, was du meinst. Überprüfen Sie heraus dieses plunk: plnkr.co/Bearbeiten/hbBT0lehOHlD0cizHmVn?p=Album Vorhören. Was ich Suche zu tun, ist die rote Absätze zu passen den ganzen Weg nach rechts, und der Blaue scroll-Daumen schweben über Ihnen. Wenn ich könnte, ziehen Sie an der blauen scroll-thumb-Weg von den Rändern ein wenig auch, sogar besser.
    InformationsquelleAutor Undefined
Schreibe einen Kommentar