Scrollbalken anzeigen
bearbeitet von
@@Gernot
> Kann man in einer HTML-Anwendung (z.B. mit PHP) erreichen, dass dort der Scrollbalken breiter wird?
Zunächst die Frage: Warum sollte man das wollen? Warum soll deine Seite anders aussehen als das, an was Nutzer auf ihrem jeweiligen System gewöhnt sind?
Aber wenn es denn einen guten Grund dafür geben sollte, kann man?
Die [ursprünglich](https://www.w3.org/TR/2018/WD-css-scrollbars-1-20180925/#scrollbar-width) für `scrollbar-width` vorgesehene Möglichkeit einer Längenangabe (also einer Breitenangabe 🤓) gibt es [aktuell](https://drafts.csswg.org/css-scrollbars-1/#scrollbar-width) nicht mehr. Mit den Schlüsselwörtern bekommt man die Scrollbar schmaler oder ganz weg, aber nicht breiter.
In auf Webkit basierenden Browsern (Safari, Chromium) allerdings gibt es (noch) proprietäre Pseudoelemente, womit man eine breitere Scrollbar hinbekommt. Dazu muss man *scrollbar track*{:@en} und *scrollbar thumb*{:@en} färben.[^1]
[^1]: Die *scrollbar thumb*{:@en}-Farbe hab ich von der Textfarbe (`currentColor`) abgeleitet, damit das für Hell- und Dunkelmodus passt.
Wenn man auf die Idee kommen sollte, diese Farben auch wie im Standard vorgesehen per `scrollbar-color` anzugeben, wirken die Pseudoelemente nicht mehr. Man müsste die `scrollbar-color`-Deklaration in ein `@supports`-Block tun, um Webkit-basierte Browser auszuschließen.
☞ [Beispiel](https://codepen.io/gunnarbittersmann/pen/empJQpL?editors=0100)
🖖 Live long and prosper
{:@en}
--
*“In my home, the America I love, the America I've written about, that has been a beacon of hope and liberty for 250 years, is currently in the hands of a corrupt, incompetent and treasonous administration. Tonight, we ask all who believe in democracy and the best of our American spirit, to rise with us, raise your voices against authoritarianism, and let freedom reign.”*{:@en}
— Bruce Springsteen, Manchester 2025-05-14
Scrollbalken anzeigen
bearbeitet von
@@Gernot
> Kann man in einer HTML-Anwendung (z.B. mit PHP) erreichen, dass dort der Scrollbalken breiter wird?
Zunächst die Frage: Warum sollte man das wollen? Warum soll deine Seite anders aussehen als das, an was Nutzer auf ihrem jeweiligen System gewöhnt sind?
Aber wenn es denn einen guten Grund dafür geben sollte, kann man?
Die [ursprünglich](https://www.w3.org/TR/2018/WD-css-scrollbars-1-20180925/#scrollbar-width) für `scrollbar-width` vorgesehene Möglichkeit einer Längenangabe (also einer Breitenangabe 🤓) gibt es [aktuell](https://drafts.csswg.org/css-scrollbars-1/#scrollbar-width) nicht mehr. Mit den Schlüsselwörtern bekommt man die Scrollbar schmaler oder ganz weg, aber nicht breiter.
In auf Webkit basierenden Browsern (Safari, Chromium) allerdings gibt es (noch) proprietäre Pseudoelemente, womit man eine breitere Scrollbar hinbekommt. Dazu muss man *scrollbar track*{:@en} und *scrollbar thumb*{:@en} färben.
Wenn man auf die Idee kommen sollte, diese Farben auch wie im Standard vorgesehen per `scrollbar-color` anzugeben, wirken die Pseudoelemente nicht mehr. Man müsste die `scrollbar-color`-Deklaration in ein `@supports`-Block tun, um Webkit-basierte Browser auszuschließen.
☞ [Beispiel](https://codepen.io/gunnarbittersmann/pen/empJQpL?editors=0100)
🖖 Live long and prosper
{:@en}
--
*“In my home, the America I love, the America I've written about, that has been a beacon of hope and liberty for 250 years, is currently in the hands of a corrupt, incompetent and treasonous administration. Tonight, we ask all who believe in democracy and the best of our American spirit, to rise with us, raise your voices against authoritarianism, and let freedom reign.”*{:@en}
— Bruce Springsteen, Manchester 2025-05-14