Gewusst wie: Benutzerdefinierte Bildlaufleiste
Erfahren Sie, wie Sie mit CSS eine benutzerdefinierte Bildlaufleiste erstellen.
Benutzerdefinierte Bildlaufleisten
Hinweis: Benutzerdefinierte Bildlaufleisten werden in Firefox oder Edge vor Version 79 nicht unterstützt.
So erstellen Sie benutzerdefinierte Bildlaufleisten
Chrome, Edge, Safari und Opera unterstützen das Nicht-Standard- ::-webkit-scrollbar
Pseudo-Element, mit dem wir das Aussehen der Bildlaufleiste des Browsers ändern können.
Das folgende Beispiel erstellt eine dünne (10 Pixel breite) Bildlaufleiste, die eine graue Spur-/Balkenfarbe und einen dunkelgrauen (#888) Griff hat:
Beispiel
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
Dieses Beispiel erstellt eine Bildlaufleiste mit Kastenschatten:
Beispiel
/* width */
::-webkit-scrollbar {
width: 20px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px
grey;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: red;
border-radius: 10px;
}
Bildlaufleisten-Selektoren
Für Webkit-Browser können Sie die folgenden Pseudoelemente verwenden, um die Bildlaufleiste des Browsers anzupassen:
::-webkit-scrollbar
die Bildlaufleiste.::-webkit-scrollbar-button
die Schaltflächen auf der Bildlaufleiste (Pfeile nach oben und unten).::-webkit-scrollbar-thumb
der ziehbare Bildlaufgriff.::-webkit-scrollbar-track
die Spur (Fortschrittsbalken) der Bildlaufleiste.::-webkit-scrollbar-track-piece
die Spur (Fortschrittsbalken) NICHT vom Griff abgedeckt.::-webkit-scrollbar-corner
die untere Ecke der Bildlaufleiste, wo sich horizontale und vertikale Bildlaufleisten treffen.::-webkit-resizer
der ziehbare Ziehpunkt zur Größenänderung, der in der unteren Ecke einiger Elemente angezeigt wird.