Scrollbars auf Webseiten erzwingen

veröffentlicht am 11. Mai 2010

Ich erstelle gerade für die Fahrschule von den Eltern eines Freundes eine neue Webseite und bin dabei auf folgendes „Problem“ gestoßen. Ich verwende hier und da einen Akkordeon-Effekt, der von den MooTools bereit gestellt wird. Hierbei kann man immer bestimmte Bereiche einer Webseite wie bei einem Akkordeon auf- und zuklappen. Den Effekt kann man zum Beispiel auf der Launchy-Webseite anschauen.

Nun habe ich aber folgende optische Unschönheit: wenn der Content beim Aufklappen länger wird als die Seite, dann ruckt das ganze Bild einmal nach Links, wenn sich die Scrollbars aktivieren, bzw. nach rechts, wenn der Inhalt wieder zugeklappt wird und die Webseite wieder vollständig vertikal in das Browserfenster passt und sich die Scrollbars wieder ausblenden.

Deshalb habe ich danach gesucht, wie man die Scrollbars immer anzeigen kann. Dazu behilft man sich mit einem simplen CSS-Trick. Es existieren zwar für dieses Szenario Browser-abhängige CSS-Markups, aber diese sind nicht standard-valide und man kann nicht davon ausgehen, dass das Markup in allen Browsern läuft.

Die Lösung ist folgende: man sagt dem Browser, dass der HTML-Inhalt etwas größer als 100% ist:

html {
   height: 101%;
}

Ich habe das Ganze nur einmal kurz mit Firefox 3.6.3 und im Internet Explorer 8 getestet. Funktioniert bei beiden prima. Zwar kann der Benutzer nun auf jeder Seite um ein paar Pixel scrollen, das nehme ich aber lieber in Kauf, als das die Seite immer hin- und herspringt :)

Kommentare

Ich habe diesen Befehl standardmäßig in allen meinen CSS drinne. Meiner Meinung nach gilt das aber vor allem für den Firefox, so dass der Scrollbalken rechts immer da, also erzwungen ist. Kann natürlich mittlerweile auch für den IE8 so gelten ;-)

Diesbezüglich finde ich auch diesen Befehl interessant:
* { margin: 0; padding: 0; }
Somit werden zumindest schon mal einige IE6 und IE7 Darstellungsprobleme behoben, wobei es aber trotzdem hin und wieder noch Hacks braucht ;-)

Kommentar #1 von Tanja am 12. Mai 2010


@Tanja: Das sind Browser-abhängige Voreinstellungen. Dazu habe ich auch schon was veröffentlicht. Suche mal nach Reset-Stylesheet.

Kommentar #2 von Patrick am 12. Mai 2010


*lacht* nö, muss ich nicht suchen, ich kenne die alle in und auswendig. Verdiene schließlich mein täglich Brot mit solchen Dingen ;-)

Kommentar #3 von Tanja am 12. Mai 2010


Ach machste hauptberuflich Webdesign? Ich dachte was in Richtung Ernährung ;)

Kommentar #4 von Patrick am 12. Mai 2010


Ich habe meine Selbständigkeit etwas aufgeteilt: Eigener Online Shop, mehrere Blogs, Webdesign & Webprogrammierung als Dienstleistung (z.B. auch für die ein oder andere Agentur). Praktisch von allem ein bißchen was. Dem Bereich Online Marketing widme ich auch hin und wieder die ein oder andere Dienstleistung.
Ernährung und Sport sind zwei Steckenpferde von mir. Einmal habe ich die Ernährungstrainer B-Lizenz und auch die Ausbildung zum Fitnesstrainer (letztes ohne Abschluß). Beides vereint Beruf mit Hobby, da mein Shop den Bereich Sporternährung umfasst.

Kommentar #5 von Tanja am 12. Mai 2010


Mal so ganz am Rande, da du Mootools einsetzt, beim Benutzer also JS voraussetzt, warum blendest du stattdessen die Scrollleiste nicht ganz aus und lässte den User per JS scrollen? Deine „Lösung“ ist nicht konsequent genug ;)

Kommentar #6 von Bernd am 09. April 2011


@Bernd: Wie kommst du auf Mootols? Wenn überhaupt, ist hier jQuery am Werk. Das Beispiel bezog sich nicht explizit auf meine Seite, sondern soll eine generelle CSS-basierte Lösung darstellen.

Kommentar #7 von Patrick am 09. April 2011


Weil du es in deinem Artikel schreibst, das du das MooTools Akkordeon benutzt ;)
Als CSS-Lösung gegen die Hopserei ist es natürlich brauchbar, aber wie oben schon gesagt, wenn schon JS vorausgesetzt, dann könnte man das auch konsequenter und schöner lösen…

Kommentar #8 von Bernd am 10. April 2011


Ach verdammt hast recht :D Der Artikel ist schon relativ alt, ich hab den nur ganz kurz überflogen :D

Kommentar #9 von Patrick am 10. April 2011


Hinterlasse einen Kommentar