Scrollbalken anzeigen

[Gernot]

Moin,

der Scrollbalken ist eine dünne Linie und wird erst breiter, wenn man ihm mit der Maus berührt.

Mit Windows-Bordmitteln kann man ihn offensichtlich verbreitern. Dann gilt dies allerdings generell.

Kann man in einer HTML-Anwendung (z.B. mit PHP) erreichen, dass dort der Scrollbalken breiter wird?

[Rolf B]

Hallo Gernot,

PHP ist keine HTML Anwendung, sondern eine serverseitige Software, die eine Programmiersprache (eben PHP) in beliebige Texte integrieren kann. Das kann HTML sein, muss aber nicht.

Das Problem Scrollbar musst Du am Client lösen. Welcher Client genau ist das, bitte? (Betriebssytem und Browser, beides mit Version)

Rolf

[Gernot]

Das Problem Scrollbar musst Du am Client lösen. Welcher Client genau ist das, bitte? (Betriebssytem und Browser, beides mit Version)

Hallo Rolf,

warum die Frage danach? Die Lösung müsste doch für alle Betriebssysteme und Browser funktionieren. Ich weiß doch nicht was der Besucher der Webseite installiert hat?

[Camping_RIDER]

Aloha ;)

warum die Frage danach?

Weil bereits dein Eingangsposting Beschreibungen enthält, die so nur auf deine spezifische Betriebssystem-Browser-Kombination zutreffen.

Ich jedenfalls sehe keinen Scrollbalken, der bei Hover größer wird...

Die Lösung müsste doch für alle Betriebssysteme und Browser funktionieren.

Spoiler: Wird es nicht. Scrollbalken sind sehr spezifisch von Software und Betriebssystem abhängig. Das heißt nicht, dass es nicht vielleicht gelingt, einem spezifischen Browser eine spezifisch unerwünschte Darstellung abzugewöhnen, aber viel mehr Blumentöpfe sind da nicht zu gewinnen.

Ich weiß doch nicht was der Besucher der Webseite installiert hat?

Ich weiß doch nicht ob der Besucher seine Scrollbalken genauso sieht wie du deine... Du siehst wie sich das Ganze da in den Schwanz beißt? Du beschreibst doch auch nur deine spezifische Benutzererfahrung...

Grüße,

RIDER

[Rolf B]

Hallo Gernot,

aber DU hast es bei DIR gesehen?

Vielleicht sehe ich bei Deiner Website auch, aber welche ist es? Hier im Forum sehe ich den Effekt nicht. Auf meinem Handy habe ich das schon gesehen, da ist ein haarbreiter Scrollbar leider Standard. Ob es sich beeinflussen lässt, müsste ich recherchieren, und da muss ich wissen, wofür genau.

Rolf

[Gernot1]

Ja, bei mir habe ich es gesehen im Firefox und hier im

codepen

Vor dem Überfahren mit der Maus:

Nach dem Überfahren:

Im Opera sind die Balken sichtbar.

[JürgenB]

Hallo

codepen

bei mir unter MacOS kommen bei Safari, Firefox und Chrome die Scrollbalken erst, wenn ich mit zwei Fingern über das Touchpad streiche. Eine Maus habe ich nicht.

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

bei mir unter MacOS kommen bei Safari, Firefox und Chrome die Scrollbalken erst, wenn ich mit zwei Fingern über das Touchpad streiche.

Was sich in den Systemeinstellungen > Erscheinungsbild > Rollbalken einblenden einstellen ließe, wenn man’s denn anders haben möchte.

Eine Maus habe ich nicht.

Dito. Wozu auch? Bei MacBooks ist das Touchpad so gut, dass man keine Maus braucht.

🖖 Live long and prosper

[Matthias Scharwies]

Guten Morgen Gernot,

unsere Seiten im Wiki waren veraltet, ich habe mal versucht den aktuellen Stand zusammenzufassen:

• Scrollbalken gestalten

Ursprünglich galten solche Scrollbalken als Teil der Benutzeroberfläche, die sich nicht oder nur über Umwege stylen lassen konnten. Auch heute noch verhalten sich die Browser nicht konsistent, obwohl in den letzten Jahren viel vereinheitlicht wurde.

…

• CSS erlaubt das Scrollen, normalerweise mit:
  • overflow: auto; → Scrollbalken erscheinen nur bei Bedarf
  • overflow: scroll; → Scrollbalken werden immer angezeigt, auch wenn sie nicht benötigt werden
  • overflow: hidden; → keine Scrollbalken und kein Scrollen erlaubt

Und hier zeigt sich ein erstes UI-Problem: In Chrome und Edge sind Scrollbalken immer sichtbar. Im Firefox und bei Safari zeigen sich die Scrollbalken nur, wenn die Elemente mit Maus, Touch oder Tastatur-(Pfeilen) angesteuert werden, wobei dies im Mac OS eingestellt werden kann.[2]

Wir haben intern diskutiert, ob und wie man Nutzern von Firefox und Safari anzeigen kann, dass scrollbare Inhalte vorhanden sind.

Ein Safari-Nutzer meinte:

irgendwie weiß ich das 😎. Den meisten(?) Seiten sieht man an, dass da noch was kommt. Oder ist es Iphone-Erfahrung?

Das stimmt, weil man auf dem Handy eh alles scrollen muss - aber wie sieht es auf dem Desktop aus?

Dieses Beispiel (Bei MDN) hat ein zusätzliches div id="info", dass dem Nutzer eine Scroll-Möglichkeit anzeigt.
Das könnte man auch als Pseudoelement angeben, müsste dem zu scrollenden Element aber eine Klasse .scrollable hinzufügen.

Herzliche Grüße
Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

• Scrollbalken gestalten

Und hier zeigt sich ein erstes UI-Problem: In Chrome und Edge sind Scrollbalken immer sichtbar. Im Firefox und bei Safari zeigen sich die Scrollbalken nur, wenn die Elemente mit Maus, Touch oder Tastatur-(Pfeilen) angesteuert werden

Das ist falsch. Chrome und Edge halten sich auf dem Mac an die Systemeinstellungen. Wenn man da an den Werksvorgaben nichts ändert, sind auch in Chrome und Edge die Scrollbalken nur beim Scrollen sichtbar.

🖖 Live long and prosper

[Matthias Scharwies]

Servus!

Das ist falsch. Chrome und Edge halten sich auf dem Mac an die Systemeinstellungen. Wenn man da an den Werksvorgaben nichts ändert, sind auch in Chrome und Edge die Scrollbalken nur beim Scrollen sichtbar.

Danke, ist aufgenommen!

Und was denkst du da drüber?

bei mir unter MacOS kommen bei Safari, Firefox und Chrome die Scrollbalken erst, wenn ich mit zwei Fingern über das Touchpad streiche.

Was sich in den Systemeinstellungen > Erscheinungsbild > Rollbalken einblenden einstellen ließe, wenn man’s denn anders haben möchte.

Und über ein Pseudoelement? Empfehlenswert oder zuviel des Guten?

Herzliche Grüße
Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

Und was denkst du da drüber?

Was @JürgenB im internen Forum sagte: „die Seitenbesucher kennen ihr System, Daher sollte man allenfalls als Ausnahme (mir fällt jetzt kein Grund ein) das Scrollverhalten bzw. das Aussehen der Scrollbalken verändern.“

Was sich in den Systemeinstellungen > Erscheinungsbild > Rollbalken einblenden einstellen ließe, wenn man’s denn anders haben möchte.

Und über ein Pseudoelement? Empfehlenswert oder zuviel des Guten?

?? Die Frage verstehe ich nicht.

🖖 Live long and prosper

[Matthias Scharwies]

Servus!

Dieses Beispiel (Bei MDN) hat ein zusätzliches div id="info", dass dem Nutzer eine Scroll-Möglichkeit anzeigt.
Das könnte man auch als Pseudoelement angeben, müsste dem zu scrollenden Element aber eine Klasse .scrollable hinzufügen.

Und über ein Pseudoelement? Empfehlenswert oder zuviel des Guten?

?? Die Frage verstehe ich nicht.

Ein Text "Scroll me! >>" rechts am (unsichtbaren) Scrollbalken.

Herzliche Grüße
Matthias Scharwies

[Gunnar Bittersmann]

@@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 für scrollbar-width vorgesehene Möglichkeit einer Längenangabe (also einer Breitenangabe 🤓) gibt es aktuell 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 wie ::-webkit-scrollbar und ::-webkit-scrollbar-thumb, womit man eine breitere Scrollbar hinbekommt. ☞ Guckst du. Dazu muss man scrollbar track und scrollbar thumb färben.^[1]

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.

🖖 Live long and prosper

---

1. Die scrollbar thumb-Farbe hab ich von der Textfarbe (currentColor) abgeleitet, damit das für Hell- und Dunkelmodus passt. ↩︎