Fast unsichtbarer Scrollbalken

[Gabriele]

Moin,
der Scroll-Balken

ist fast nicht zu sehen. Erst wenn man (vielleicht etwas ungeübt) mit der Maus darauf geht wird sie deutlich sichtbar

Gibt es eine Möglichkeit den Balken schon anfangs so breit zu zeigen?

[JürgenB]

Hallo,

im Wiki (https://wiki.selfhtml.org/wiki/OnePager#Komfort-Version_mit_JavaScript) habe ich den Scrollbar so angepasst:

      main {
        overflow: auto;
        padding: 0 .5em;
        scrollbar-color: var(--red) var(--background-color);
      }

      main::-webkit-scrollbar {
        width: 1em;
        height: 2em;
        background-color: beige;
      }
      
      main::-webkit-scrollbar:hover {
        border: thin solid lightgray;
        border-radius: .5em 0 .5em .5em;
      }
      
      main::-webkit-scrollbar-thumb {
        background: firebrick;
        border-radius: .5em 0 .5em .5em;
      }

Gruß
Jürgen

[Gaby]

Hallo Jürgen,
bei mir klappt es nicht.
Liegt es an dem fehlenden, zitierten Javascript?

Gruß Gaby

[JürgenB]

Hallo Gaby,

nein. Gibt es denn auf deiner Seite ein main-Element?

Kannst du uns mal den Link zu deiner Seite schicken?

Gruß
Jürgen

[Gaby]

Hallo Jürgen,

Kannst du uns mal den Link zu deiner Seite schicken?

Hier

[Gunnar Bittersmann]

@@Gaby

Hier

Und wo ist „hier“ das CSS, das angeblich nicht klappt?

🖖 Live long and prosper

[Gaby]

Bei mir klappt der Link, auch wenn Dir "klappt" nicht gefällt. Es gibt nun einmal sprachliche Unterschiede in unserem Lande.

[Gunnar Bittersmann]

@@Gaby

Bei mir klappt der Link

Als ich dem das erste Mal gefolgt bin, war da kein CSS. Sollte das an meiner Internetverbindung gelegen haben, dass das nicht geladen wurde? (Bin gerade in BrandEDGEburg unterwegs.) Ich gebe dir den benefit of the doubt^[1] und ziehe meine Negativbewertung zurück.

🖖 Live long and prosper

---

1. Wie sagt man das auf Deutsch? Gibt es da eine Entsprechung, außer „im Zweifel für den Angeklagten“? ↩︎

[MudGuard]

Hi,

benefit of the doubt

Wie sagt man das auf Deutsch? Gibt es da eine Entsprechung, außer „im Zweifel für den Angeklagten“?

Vertrauensvorschuß?

cu,
Andreas a/k/a MudGuard

[JürgenB]

Hallo Gaby,

wenn du mit "var" arbeitest, musst du die "Variablen" auch definieren.

Innerhalb des "main" wird nur gescrollt, wenn das "main" kleiner ist als sein Inhalt. Sonst scrollt der "body".

Gibt dem "main" eine Höhe, und es wird auch im "main gescrollt.

Aber ich habe gerade gemerkt, dass der Scrollbalken im Wiki-Beispiel nur im Safari immer angezeigt wird, nicht aber im Firefox und Chrome. Sorry. Leider weiß ich jetzt auch nicht mehr weiter.

Gruß
Jürgen

[Rolf B]

Hallo Jürgen,

Innerhalb des "main" wird nur gescrollt, wenn das "main" kleiner ist als sein Inhalt. Sonst scrollt der "body".

Wenn man den Scrollbar des Body ändern will, muss man den Body höhenbegrenzen. Sonst hat er den nicht, sondern das Fenster hat ihn.

Will man den Scrollbar des Fensters ändern, muss man :root stylen:

:root {
   scrollbar-color: red yellow;
}

Aber ich habe gerade gemerkt, dass der Scrollbalken im Wiki-Beispiel nur im Safari immer angezeigt wird,

Da genug Inhalt da ist, gibt es ja auch keinen Grund, ihn nicht anzuzeigen. Wenn Du bei wenig Inhalt einen leeren Scrollbar willst, dann musst Du auf main ein overflow-y: scroll setzen. Oder verstehe ich Dich miss?

Rolf

[JürgenB]

Hallo Rolf,

ich glaube, Gaby mochte, dass der Scrollbalken, sofern nötig, immer sichtbar ist und nicht erst, wenn man mit der Maus drüber geht oder mit Geste scrollt. Beim One-Pager im Wiki ist das beim Safari so, daher habe ich die Seite auch verlinkt. Erst später habe ich gemerkt, dass das (bei MacOS?) nur beim Safari so ist.

Gruß
Jürgen

[Gabriele]

Hallo Rolf,

ich glaube, Gaby mochte, dass der Scrollbalken, sofern nötig, immer sichtbar ist und nicht erst, wenn man mit der Maus drüber geht oder mit Geste scrollt.

Er ist, sofern nötig, sichtbar nur ganz dünn - unzumutbar für Menschen ohne Adlerblick!

[Rolf B]

Hallo Gabriele,

Das scheint in Chrome auf Android generell so zu sein, da Web ist voll mit Fragen wie man den Scrollbalken sichtbar hält.

Auf dem Windows PC verschwindet er bei mir allerdings nicht, ist das ein Touch-Device Thema?

Rolf

[Matthias Scharwies]

Servus!

Das scheint in Chrome auf Android generell so zu sein, da Web ist voll mit Fragen wie man den Scrollbalken sichtbar hält.

Auf dem Windows PC verschwindet er bei mir allerdings nicht, ist das ein Touch-Device Thema?

Nein, browserspezifisch. Chrome hat mittlereile eine Lösung (siehe unten).
Auf dem Safari sieht man scrollbaren Inhalt außerhalb des Viewports erst, wenn der User aktiv in die Seite geht.

Wir hatten im Juli mal drüber geredet:

https://forum.selfhtml.org/self/2025/jul/19/scrollbalken-anzeigen/1820994#m1820994

Sowohl @JürgenB als auch @Gunnar Bittersmann erklärten, dass man ja wisse, dass es da unten noch mehr Inhalt gäbe.

---

Mittlerweile habe ich scroll-button() entdeckt - es erzeugt ein Pseudoelement mit einem Pfeil oder Text, funktioniert aber nur in Chrome, Edge und Opera - also bei ca. 2/3 der Nutzer.

Bei Gelegenheit erstelle ich ein Beispiel für das Wiki.

Herzliche Grüße
Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

Auf dem Windows PC verschwindet er bei mir allerdings nicht, ist das ein Touch-Device Thema?

Nein, browserspezifisch.

Wirklich? Mag sein oder auch nicht. Auf jeden Fall OS-spezifisch.

Auf macOS ist die Grundeinstellung, dass die Scrollbar erst sichtbar wird, wenn man scrollt. Das kann man aber in den Systemeinstellungen ändern.

🖖 Live long and prosper

[Der Martin]

Hallo,

Auf macOS ist die Grundeinstellung, dass die Scrollbar erst sichtbar wird, wenn man scrollt. Das kann man aber in den Systemeinstellungen ändern.

das ist bei einigen Windows-Applikationen (insbesondere MS Office und Teams) inzwischen auch so - und da kann man es meines Wissens nicht ändern.

Ich finde das übel, denn der Scrollbalken ist (war) für mich immer auch ein wichtiges Orientierungsmerkmal: Wo im Dokument befinde ich mich gerade?

Einen schönen Tag noch
 Martin

[Gunnar Bittersmann]

@@Gaby

bei mir klappt es nicht.

Cheatah über was wann klappt und was nicht funktioniert

🖖 Live long and prosper