CSS3 benutzerdefinierter Bildlaufleistenstil::webkit-scrollbar Beispielcode, ausführliche Erklärung

::-WebKit-Bildlaufleiste  
{  
    Breite: 6px;  
    Höhe: 6px;  
    Hintergrundfarbe: #F5F5F5;  
}

::-WebKit-Bildlaufleiste-Spur  
{  
    -webkit-box-shadow: Einschub 0 0 6px rgba(0,0,0,0,3);  
    Rahmenradius: 10px;  
    Hintergrundfarbe: #FFF;  
}

::-Webkit-Scrollbar-Daumen  
{  
    Rahmenradius: 10px;  
    -webkit-box-shadow: Einschub 0 0 6px rgba(0,0,0,.3);  
    Hintergrundfarbe: #AAA;  
}

:horizontal  
//Die horizontale Pseudoklasse gilt für alle horizontalen Bildlaufleisten: vertikal  
//Die vertikale Pseudoklasse gilt für alle vertikalen Bildlaufleisten: decrement  
//Die Dekrement-Pseudoklasse gilt für Schaltflächen und Gleisstücke. Eine Schaltfläche oder ein Spurfragment, das eine Dekrementierung darstellt, z. B. eine Region oder eine Schaltfläche, mit der eine Region nach oben oder rechts verschoben werden kann: Inkrement  
//Die inkrementelle Pseudoklasse gilt für Schaltflächen und Schienenstücke. Zeigt eine inkrementelle Schaltfläche oder ein Spurfragment an, z. B. eine Region oder eine Schaltfläche, mit der eine Region nach unten oder nach links verschoben werden kann: Start  
//Die Start-Pseudoklasse gilt für Schaltflächen und Gleisstücke. Gibt an, ob das Objekt (Button-Track-Fragment) vor dem Slider platziert wird: Ende  
//Ende der Pseudoklasse, gilt für Schaltflächen und Gleisstücke. Gibt an, ob das Objekt (Button-Track-Fragment) hinter dem Slider platziert wird: Doppel-Button  
//Die Pseudoklasse „Doppeltaste“ gilt sowohl für Tasten als auch für Gleisstücke. Bestimmt, ob die Spur an einem Tastenpaar endet. Das heißt, der Weltraumschrott liegt als Knopfpaar nebeneinander.  
  
:Einzelknopf  
//Die Einzelknopf-Pseudoklasse gilt sowohl für Knöpfe als auch für Gleisstücke. Bestimmt, ob das Ende der Spur eine Schaltfläche ist. Das heißt, die Orbitalfragmente liegen neben einem separaten Knopf.  
  
:kein-Knopf  
Die Pseudoklasse „no-button“ gibt an, dass sich am Ende der Spur kein Button befindet.  
  
:Ecke vorhanden  
//Die Pseudoklasse „corner-present“ gibt an, ob die Ecke der Bildlaufleiste vorhanden ist.  
  
:Fenster-inaktiv  
//Gilt für alle Bildlaufleisten und gibt den Bereich an, der die Bildlaufleiste enthält, wenn der Fokus nicht auf dem Fenster liegt.  
  
::-webkit-scrollbar-track-piece:start {  
/Scrollleiste oben oder linke Hälfte/  
}  
  
::-webkit-scrollbar-thumb:Fenster-inaktiv {  
/Wenn der Fokus nicht im aktuellen Bereichsreglerzustand liegt/  
}  
  
::-webkit-scrollbar-button:horizontal:dekrementieren:hover {  
/Zustand, wenn sich die Maus auf der Schaltfläche unter der horizontalen Bildlaufleiste befindet/  
}