scrollbar

[LLB]

hi,

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

[zerko]

Ich glaube nicht, aber du kannst sie z.B. verschwinden lassen etc.

GRuß
zekro

[LLB]

Ich glaube nicht, aber du kannst sie z.B. verschwinden lassen etc.

GRuß
zekro

das weiß ich aber ich wollt sie ja eben schmäler und nicht ganz weg ;)

mfGreetz
LLB

[R. v. H.]

hi,

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

Mit CSS geht das nicht soweit ich weiss. Was du aber machen kannst waere es eine Scrollbar mit Javascript zu gestalten. Das erlaubt dir sogar eigene Arrows als image einzubinden. Schau mal auf www.kalkscheune.de. Die haben es dort so gemacht.

Gruss

R. v. H.

[Candid Dauth]

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)