Wie man erstellt: Benutzerdefinierter Scrollbalken

Lernen Sie, wie man benutzerdefinierte Scrollbalken mit CSS erstellt.

Benutzerdefinierter Scrollbalken

Probieren Sie es selbst aus

Probieren Sie es selbst aus

Hinweis:Firefox oder Versionen von Edge vor 79 unterstützen keine benutzerdefinierten Scrollbalken.

Wie man einen benutzerdefinierten Scrollbalken erstellt

Chrome, Edge, Safari und Opera unterstützen die nicht-standardisierten ::-webkit-scrollbar Ein Pseudo-Element, das uns ermöglicht, das Aussehen des Browser-Scrollbalkens zu ändern.

Das folgende Beispiel erstellt einen Scrollbalken mit einer Breite von 10px, der einen grauen Schienen-/Balkenfarbe und einen dunkelgraue (#888) Schieberegler hat:

/* Breite */
::-webkit-scrollbar {
  width: 10px;
}
/* Schiene */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
/* Schieberegler */
::-webkit-scrollbar-thumb {
  background: #888;
}
/* Schieberegler bei Mausüberfahren */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

Probieren Sie es selbst aus

Dieses Beispiel erstellt einen Scrollbalken mit Schatteneffekt:

Beispiel

/* Breite */
::-webkit-scrollbar {
  width: 20px;
}
/* Schiene */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 10px;
}
/* Schieberegler */
::-webkit-scrollbar-thumb {
  background: red;
  border-radius: 10px;
}

Probieren Sie es selbst aus

Scrollbalkenselektor

Für Webkit-Browser können Sie die folgenden Pseudo-Elemente verwenden, um den Scrollbalken des Browsers zu personalisieren:

::-webkit-scrollbar Der Scrollbalken selbst.
::-webkit-scrollbar-button Die Schaltflächen auf dem Scrollbalken (Pfeile nach oben und nach unten).
::-webkit-scrollbar-thumb Der verschiebbare Scrollregler.
::-webkit-scrollbar-track Der Schienen (Fortschrittsbalken) des Scrollbalkens.
::-webkit-scrollbar-track-piece Der Teil des Schienen (Fortschrittsbalken), der von dem Schieberegler nicht abgedeckt wird.
::-webkit-scrollbar-corner Der untere Winkel des Scrollbalkens, wo sich die horizontale und vertikale Scrollleiste kreuzen.
::-webkit-resizer 出现在某些元素底角的可拖动调整大小手柄。