Michael van Laar

Startseite » Blog » Die neusten Blog-Artikel » Der bessere Trick gegen ruckelnde Websites

Der bessere Trick gegen ruckelnde Websites

[An dieser Stelle würden Sie einen Facebook-„Gefällt mir“-Button sehen – wenn Deutschland nicht das Land der ausufernden Datenschutz-Paranioia wäre.]

Zentriert ausgerichtete Websites (mit fester Breite) ruckeln optisch ein klein wenig horizontal hin und her, wenn man von einer langen Seite mit vertikalem Scrollbalken zu einer kurzen Seite ohne Scrollbalken wechselt – und umgekehrt. Der allgemein übliche Trick zur Vermeidung dieses Ruckel-Effekts hat einen unerwünschten Nebeneffekt: Er macht die Seite im Safari 3 unbenutzbar. Auch wenn die Verbreitung des Safari 3 weit unter der Ein-Prozent-Marke liegt, hat mich das gestört.

Meine bisherige Lösung: Erzwingen des vertikalen Scrollbalkens mithilfe der body-Höhe

Wie viele andere Webdesigner auch, habe ich bis gestern den folgenden bekannten Trick angewendet, um die Anzeige eines vertikalen Scrollbalkens zu erzwingen, unabhängig von der Länge bzw. Kürze der Seite.

html {
  height: 100%;
}

body {
  height: 101%;
}

Dadurch ist jede Seite immer ein klein wenig länger als der Viewport im Browser, so dass ein „echter“ vertikaler Scrollbalken angezeigt wird. Nicht so im Safari 3. Dort wird im Gegensatz zu allen anderen Browsern überhaupt kein Scrollbalken angezeigt. Und noch schlimmer: Eine auf diese Weise „gepimpte“ Seite kann im Safari 3 überhaupt nicht mehr gescrollt werden und ist damit in diesem Browser unbenutzbar.

Meine neue Lösung: Erzwingen des vertikalen Scrollbalkens mithilfe der CSS3-Eigenschaft overflow-y

Anstatt einen „echten“, funktionierenden vertikalen Scrollbalken mit einem etwas zu hohen body zu erzwingen, lässt sich das Ruckel-Problem auch viel einfacher beheben. Die CSS3-Eigenschaft overflow-y lässt sich prima dazu verwenden, auch bei kurzen Seiten einen inaktiven vertikalen Scrollbalken anzeigen zu lassen. Das reicht völlig aus, denn es geht schließlich nur darum, dass der Platz des vertikalen Scrollbalkens „reserviert“ ist. Und so geht es:

html {
  overflow-y: scroll;
}

Soweit ich das bisher testen konnte, kommen alle Browser problemlos damit klar und zeigen bei zu kurzen Seiten einen inaktiven vertikalen Scrollbalken an.

Wichtig dabei: Die Eigenschaft overflow-y muss dem html-Element zugewiesen werden, nicht dem body. Versucht man letzteres, erhält man in den Internet-Explorer-Versionen 6 und 7 zwei vertikale Scrollbalken direkt nebeneinander, was seltsam aussieht.

• Tweet
• Auf XING teilen

29. Juni 2010  ·  Thema: Webdesign  ·  10 Kommentare

---

Kommentare