Breite von Scrollbalken

[Dietmar]

Hallo,
im Opera sind die Scrollbalken deutlich sichtbar.

Im Firefox sind sie sehr schmal und kaum sichtbar (in dem Bild unten habe ich die Farbe der Balken verdunkelt, damit besser sichtbar).

Kann man die Scrollbalken im Firefox verbreitern oder notfalls farblich ändern?

[Matthias Scharwies]

Servus!

Hallo,
im Opera sind die Scrollbalken deutlich sichtbar.

Im Firefox sind sie sehr schmal und kaum sichtbar (in dem Bild unten habe ich die Farbe der Balken verdunkelt, damit besser sichtbar).

Kann man die Scrollbalken im Firefox verbreitern oder notfalls farblich ändern?

Ja, es gibt im Wiki ein Tutorial dazu:

• Scrollbalken gestalten

Herzliche Grüße
Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

Ja, es gibt im Wiki ein Tutorial dazu:

• Scrollbalken gestalten

Ich wollte mich gerade anschicken, den Artikel zu berichtigen, bin mir aber nicht sicher, was denn nun richtig ist.

Was da steht

• scrollbar-color
• scrollbar-width

Sie werden heute (Juli 2025) von fast allen Browsern unterstützt. Ausnahme ist der Safari.

ist jedenfalls falsch. Safari unterstützt scrollbar-width.

Laut Can I Use und MDN unterstützt Safari auch scrollbar-color.

Allerdings kann ich das mit Safari 26.3 auf macOS 15.7.4 bei meiner Testseite nicht nachvollziehen.

Statt rot gefärbter Scrollbar gibt’s oben den roten Rahmen wegen

html {
	@supports not (scrollbar-color: red black) {
		border-block-start: 2rem solid red;
	}
}

Kann das mal jemand mit Mac verifizieren?

Safari auf iOS 26.3.1 hingegen färbt die Scrollbar.

🖖 Live long and prosper

[JürgenB]

Hallo,

Test mit Safari 26.3.1 unter macOS 26.3.1 im Frickl:

• scrollbar-color unterstützt die erste Farbe, die zweite zeigt keine Wirkung.
  scrollbar-color: green red; zeigt einen grünen Balken auf Seitenhintergrund

• scrollbar-width zeigt keine Wirkung.
  scrollbar-width: auto; und scrollbar-width: 100px; zeigen den gleichen Scrollbar.

• die ::-webkit-Angaben zeigen auch keine Wirkung.

Ratlose Grüße
Jürgen

[Gunnar Bittersmann]

@@JürgenB

Test mit Safari 26.3.1 unter macOS 26.3.1 im Frickl:

• scrollbar-color unterstützt die erste Farbe, die zweite zeigt keine Wirkung.
  scrollbar-color: green red; zeigt einen grünen Balken auf Seitenhintergrund

Du hast die überlagernden Scrollbalken? In den Systemeinstellungen > Erscheinungsbild > Rollbalken einblenden: Immer; dann siehst du vermutlich auch die Hintergrundfarbe?

Vielleicht arbeitet mein Safari nicht so richtig mit meiner macOS-Version zusammen?

---

• scrollbar-width zeigt keine Wirkung.
  scrollbar-width: auto; und scrollbar-width: 100px; zeigen den gleichen Scrollbar.

100px ist auch keine gültige Angabe für scrollbar-width.

---

• die ::-webkit-Angaben zeigen auch keine Wirkung.

Das funzt bei mir in Safari und Chromia. ☞ Codepen

🖖 Live long and prosper

[JürgenB]

Hallo Gunnar,

Du hast die überlagernden Scrollbalken? In den Systemeinstellungen > Erscheinungsbild > Rollbalken einblenden: Immer; dann siehst du vermutlich auch die Hintergrundfarbe?

das war es. Mit "Immer" und dem richtigen Wert funktionieren

scrollbar-color: steelblue red;
scrollbar-width: thin;

Gruß
Jürgen

[Rolf B]

Hallo Gunnar Bittersmann,

bin mir aber nicht sicher, was denn nun richtig ist.

Wenn Du es schon nicht weißt, dann müsste die Antwort eigentlich lauten: Lass die CSS-Finger vom Scrollbar und nimm hin, was Dein Browser Dir vor die Füße kübelt.

Zu der Frage

Kann man die Scrollbalken im Firefox verbreitern oder notfalls farblich ändern?

möchte ich hinzufügen: Welcher Firefox? Der mobile? Auf meinem Desktop-FF sehe ich fette Scrollklötze

Rolf