Generator für individuelle CSS-Scrollbars

Ersetzen Sie die graue Standard-Scrollbar durch eine Version in den Farben Ihrer Website: Passen Sie Breite, Farben und Rundung an, sehen Sie die Live-Vorschau und kopieren Sie anschließend den fertigen CSS-Code. Alles wird lokal in Ihrem Browser berechnet.

Beispiele:

Breite: 10px

Rundung: 8px

Farbe der Leiste (Track)

Farbe des Schiebers (Thumb)

Farbe beim Überfahren

Zeile 1 des scrollbaren Inhalts – scrollen Sie, um die Scrollbar zu sehen.

Zeile 2 des scrollbaren Inhalts – scrollen Sie, um die Scrollbar zu sehen.

Zeile 3 des scrollbaren Inhalts – scrollen Sie, um die Scrollbar zu sehen.

Zeile 4 des scrollbaren Inhalts – scrollen Sie, um die Scrollbar zu sehen.

Zeile 5 des scrollbaren Inhalts – scrollen Sie, um die Scrollbar zu sehen.

Zeile 6 des scrollbaren Inhalts – scrollen Sie, um die Scrollbar zu sehen.

Zeile 7 des scrollbaren Inhalts – scrollen Sie, um die Scrollbar zu sehen.

Zeile 8 des scrollbaren Inhalts – scrollen Sie, um die Scrollbar zu sehen.

Zeile 9 des scrollbaren Inhalts – scrollen Sie, um die Scrollbar zu sehen.

Zeile 10 des scrollbaren Inhalts – scrollen Sie, um die Scrollbar zu sehen.

Zeile 11 des scrollbaren Inhalts – scrollen Sie, um die Scrollbar zu sehen.

Zeile 12 des scrollbaren Inhalts – scrollen Sie, um die Scrollbar zu sehen.

Die Vorschau nutzt die Eigenschaften ::-webkit-scrollbar (Chrome, Edge, Safari) und scrollbar-color (Firefox); die Darstellung kann je nach Browser leicht abweichen.

CSS-Code

.byteryo-custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #8b5cf6 #1e1e2e;
}

.byteryo-custom-scrollbar::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.byteryo-custom-scrollbar::-webkit-scrollbar-track {
  background: #1e1e2e;
  border-radius: 8px;
}

.byteryo-custom-scrollbar::-webkit-scrollbar-thumb {
  background: #8b5cf6;
  border-radius: 8px;
}

.byteryo-custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #a78bfa;
}

So funktioniert es

Es gibt keine einzelne standardisierte CSS-Eigenschaft zum Gestalten einer Scrollbar: Chromium-basierte Browser (Chrome, Edge, Safari) verwenden die Pseudo-Elemente ::-webkit-scrollbar, während Firefox die Eigenschaften scrollbar-width und scrollbar-color nutzt. Dieses Tool erzeugt beides gleichzeitig, in einem auf eine Klasse begrenzten CSS-Block, sodass das Ergebnis nur für den von Ihnen gewählten Container gilt und nicht für die gesamte Seite.

Wie wende ich diesen Code auf meinen eigenen Container an?

Kopieren Sie das erzeugte CSS, benennen Sie die Klasse byteryo-custom-scrollbar nach Ihrer Namenskonvention um und fügen Sie diese Klasse dann dem HTML-Element hinzu, dessen Scrollbar Sie anpassen möchten (zum Beispiel ein div mit overflow: auto oder overflow: scroll).

Sieht das Ergebnis in allen Browsern gleich aus?

Nein: Firefox unterstützt über scrollbar-color nur die Breite (schmal oder automatisch) und die Farben, jedoch weder Rundung noch eine separate Hover-Farbe, während Chromium-basierte Browser eine feinere Steuerung erlauben. Der erzeugte Code liefert auf jeder Engine das bestmögliche Ergebnis, ein leichter optischer Unterschied zwischen Browsern ist aber normal.

Der CSS-Code wird vollständig in Ihrem Browser zusammengesetzt: Während der Erzeugung werden keine Daten an einen Server gesendet.