CSS-Scrollbalken-Generator

Breite, Radius, Rand und drei Farben einstellen, das Ergebnis in der scrollbaren Vorschau prüfen und das erzeugte CSS kopieren.

Läuft lokal in deinem Browser

Kategorie ansehen: Frontend & Design (34)

· ::-webkit-scrollbar · scrollbar-color · Firefox

STEUERPULT

LIVE-VORSCHAU

Scrollable developer notes

Use the thumb to inspect the generated width, border and hover treatment.

Cross-browser output

The export includes standardized Firefox properties and WebKit pseudo-elements.

Copy production CSS

Apply the generated class to any overflow container in your interface.

Keep native behavior

Styling changes appearance while keyboard and wheel scrolling remain native.

CSS EXPORTIEREN

So gestalten Sie einen Scrollbalken und kopieren das erzeugte CSS

Der Generator schreibt zwei Regelsätze aus denselben sechs Werten: die Standardeigenschaften scrollbar-width und scrollbar-color für Firefox und die ::-webkit-scrollbar-Familie — Spur, Griff, Hover und Breite/Höhe — für Chromium und Safari. Die Anzeige im Kopf der Bühne nennt die aktuelle Breite und das zugehörige Schlüsselwort, etwa „12px · auto“.

Die Vorschau ist ein echter Überlauf-Container, keine Zeichnung: In der Messung lagen 528 px Inhalt in einem 300 px hohen Fenster, den Balken malt also der Browser selbst. Dasselbe CSS aus dem Codefeld wird mit #cs-scroll-preview als Selektor eingefügt; gegenüber dem kopierten Block ändert sich nur der Klassenname.

Wählen Sie eine Voreinstellung, um einen kompletten Wertsatz zu laden. Forest ist die Vorgabe — Breite 12, Radius 10, Rand 3, Griff #2e8b62, Hover #1f6f4b, Spur #e7f0eb —, danach folgen Slate (11/3/2), Sunset (14/12/3) und Minimal (7/7/0).

Alternativ setzen Sie die Werte von Hand: Breite (4–28 px), Eckenradius (0–30 px), Griffrand (0–6 px) sowie die Farben für Griff, Hover und Spur. Sobald ein Feld bearbeitet wird, wechselt die Auswahl auf den Eintrag Benutzerdefiniert; Zurücksetzen stellt die Forest-Werte wieder her.

Zahlen werden beim Verlassen des Feldes oder mit Enter übernommen: Sie werden auf ganze Pixel gerundet, auf ihren Bereich begrenzt und in das Feld zurückgeschrieben. Aus 100 wird 28, aus 3 wird 4, ein leeres Feld fällt auf 4 zurück und 12.6 wird zu 13 — die Zahl im Feld, die Anzeige und das ausgegebene CSS bleiben dadurch deckungsgleich.

Beobachten Sie die Vorschau beim Ändern: Sie scrollt wirklich, sodass Griff, Rand, Spur und Hover-Farbe vom Browser gezeichnet werden. Breiten bis einschließlich 10 px schalten zusätzlich auf scrollbar-width: thin; ab 11 px steht auto, weil Firefox nur diese beiden Schlüsselwörter kennt und die exakte Pixelbreite eine WebKit-Funktion ist.

Mit „CSS kopieren“ landet der Text des Codefelds in der Zwischenablage — fünf Regeln, nichts weiter —, mit Zurücksetzen kehren die Forest-Werte zurück. Der Selektor der Ausgabe ist .custom-scrollbar; ersetzen Sie ihn durch die Klasse Ihres eigenen Überlauf-Containers.

Breite, Farben, Voreinstellungen und die zwei Regelsätze des Generators

Was das kopierte CSS enthält

Der Block besteht aus fünf Regeln: die Basisklasse mit scrollbar-color: <Griff> <Spur>, ::-webkit-scrollbar mit Breite und Höhe, ::-webkit-scrollbar-track mit der Spurfarbe und dem Radius, ::-webkit-scrollbar-thumb mit der Grifffarbe, einem in der Spurkfarbe gezeichneten Rand und demselben Radius sowie ::-webkit-scrollbar-thumb:hover mit der Hover-Farbe.

Farben stehen als sechsstellige Hex-Werte in Kleinbuchstaben, Zahlen als ganze Pixel. Der Griffrand nutzt absichtlich die Spurkfarbe: Er zieht den Griff zusammen, sodass die Spur als feine Linie darum sichtbar bleibt — deshalb ändert eine neue Spurkfarbe auch den Rand.

Voreinstellungen, Standardwerte und Zurücksetzen

Die vier Voreinstellungen sind feste Wertsätze, keine Stylesheets: Forest 12/10/3 mit #2e8b62, #1f6f4b und #e7f0eb, Slate 11/3/2 mit #526575, #354754 und #dfe5e8, Sunset 14/12/3 mit #d87352, #a94f3a und #f7e4dc sowie Minimal 7/7/0 mit #87958e, #53635b und #f3f6f4. Die Reihenfolge ist Breite, Radius, Rand und danach Griff, Hover und Spur.

Benutzerdefiniert ist ein Zustand, keine fünfte Voreinstellung: Der Eintrag bleibt in der Liste verborgen, erscheint nach einer Feldänderung als ausgewählte Beschriftung, und seine Auswahl überschreibt die angezeigten Werte nicht. Zurücksetzen stellt die Forest-Werte wieder her und leert die Statuszeile.

Grenzen, Browser-Abdeckung und lokale Verarbeitung

Die Breite ist auf 4–28 px, der Radius auf 0–30 px und der Griffrand auf 0–6 px begrenzt; bei der Übernahme wird jeder Wert auf ganze Pixel gerundet. Chromium und Safari beachten die Pixelbreite und die Farben über die ::-webkit-scrollbar-Pseudoelemente, Firefox dagegen nur scrollbar-width und scrollbar-color — prüfen Sie das Ergebnis vor dem Einsatz in beiden Engines; die Vorschau zeigt den Browser, in dem Sie gerade arbeiten.

Alles läuft auf der Seite: Nach dem Laden, dem Wechsel der Voreinstellungen, dem Eintippen einer Breite, der Farbwahl, dem Kopieren und dem Zurücksetzen gab es in den en-, fr- und ja-Läufen keine einzige Netzanfrage, und die Seite meldete keine Konsolenfehler. Das Layout bleibt von 320 px bis 1360 px Breite ohne horizontales Scrollen im Viewport.