CSS-Scrollbar-Generator

CSS-Scrollbar-Generator: wofür es gut ist

Eine Bildlaufleiste in den Markenfarben gibt der Website einen besseren Feinschliff, aber das CSS hat sich geändert: Heute gibt es die Standardeigenschaften scrollbar-color und scrollbar-width, unterstützt von Firefox, Chrome und Edge 121 und Safari 26.2, während alte Versionen nur ::-webkit-scrollbar verstehen.

Dieser Generator baut beide Wege getrennt durch @supports, wie es die Dokumentation von Chrome empfiehlt, weil Chrome die alten Regeln ignoriert, wenn scrollbar-color definiert ist. Du wählst die Farben von Spur und Leiste, die Breite, die Ecken und die Farbe beim Darüberfahren mit der Maus und testest in der Beispielbox.

So geht’s

1. Wähle die Farben von Spur und Leiste.
2. Passe Breite und Ecken an.
3. Kopiere das CSS für die ganze Seite oder für eine Box.

Wann nutzen

• Bildlaufleiste in den Markenfarben.
• Boxen mit Bildlauf innerhalb der Seite.
• Dashboards und Systeme mit dunklem Thema.

Häufige Fragen

Funktioniert es in allen Browsern?

Die Standardeigenschaften scrollbar-color und scrollbar-width funktionieren in Firefox, Chrome und Edge ab Version 121 und in Safari 26.2. Für frühere Versionen bringt der Code auch die Regeln ::-webkit-scrollbar mit, die Breite, Ecken und Farbe beim Darüberfahren mit der Maus ändern.

Warum nutzt der Code @supports?

In Chrome werden die Regeln ::-webkit-scrollbar ignoriert, wenn scrollbar-color definiert ist. Das @supports wendet die Standardeigenschaften nur dort an, wo es sie gibt, und überlässt die alten Regeln den Browsern, die sie nicht kennen.

Stört das Anpassen der Leiste die Barrierefreiheit?

Es kann stören, wenn sie zu dünn wird oder keinen Kontrast zur Spur hat. Behalte eine Breite, die man mit der Maus greifen kann, und eine Farbe, die sich vom Hintergrund abhebt.

Ist das wirklich kostenlos?

Ja, 100% kostenlos. Ohne Anmeldung, ohne Abo und ohne Nutzungslimit. Alle Tools von Tools123 sind kostenlos.

Ähnliche Tools