Candid Dauth: scrollbar

Beitrag lesen

Heißa, LLB,

kann man ne scrollbar mit zB css schmäler machen?

Du könntest sie zum Beispiel ein wenig aus dem Bilde verschieben:
html { overflow:hidden; position:absolute; top:0; left:0; width:100%; height:100%; margin:0; padding:0; border-style:none; }
body { overflow:auto; position:absolute; top:0; left:0; right:-5px; max-height:100%; padding:0; margin:0; border-style:none; }
body > * { margin-left:.5em; margin-right:.5em; } /* padding des bodys simulieren */

Beachte, dass man dann allerdings in Firefox und älteren Mozilla-Versionen nicht mit dem Scrollrad scrollen kann.

Nun die Erläuterung:

  • Erste Zeile, html:
        Ich lege fest, dass das HTML-Element so groß ist wie der Viewport und dass es bei größerem Inhalt keine Scrollbar zeigt (das ist normalerweise die Browserscrollbar).
  • Zweite Zeile, body:
         Mit overflow:auto simuliere ich das normale overflow:auto des HTML-Elements, also das Erscheinen der Scrollbars bei übergroßem Inhalt. Dann sorge ich dafür, dass die Scrollbar rechts um fünf Pixel abgeschnitten wird, wodurch sie oft nur noch 10px groß ist. Das Problem ist allerdings, dass man nie weiß, wie groß die Scrollbar des Nutzers wirklich ist.
         Mit max-height lege ich nun fest, dass das Body-Element maximal so groß wie der Viewport sein darf, bei größeren Inhalten erscheint eine Scrollbar. Damit 100% nicht ein paar Pixel mehr sind als der Viewport, muss ich margin, padding und border-width auf 0 Pixel setzen.
         Dadurch, dass nun der body kein padding mehr hat, selektiere ich der
  • nächsten Zeile, body > *
         alle Elemente, die direkt unter Body vorkommen (also nur Kinder und keine Enkel). Diesen weise ich einen Außenabstand zu, der das padding des bodys simulieren soll.

Alles in Allem keine sehr schöne Lösung, aber vielleicht hilft es dir ja weiter.

Caramba!
Grüße aus Biberach Riss,
Candid Dauth (ehemals Dogfish)

--
„Bevorzuge Gerechtigkeit auch dann, wenn sie deinen eigenen Nachteil bedeutet.“ | Mein SelfCode
http://cdauth.net.tc/