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.

[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

[Gunnar Bittersmann]

@@Gaby

bei mir klappt es nicht.

Cheatah über was wann klappt und was nicht funktioniert

🖖 Live long and prosper