Lange Seiten in FireFox verschieben sich, wenn die Bildlaufleiste erscheint

Question

In Firefox und Safari werden Seiten, die zentriert sind, um einige Pixel verschoben, wenn die Seite lang genug ist, um die Bildlaufleiste erscheinen zu lassen. Wenn Sie durch eine Website navigieren, die lange und kurze Seiten hat, scheint die Seite zu "springen".

Der IE7 neigt dazu, die Bildlaufleiste die ganze Zeit sichtbar zu lassen, aber sie zu deaktivieren, wenn die Seite nicht lang genug ist. Da sich die Breite des HTML-Fensters nie ändert, ändert sich auch die Zentrierung der Seite nicht.

Gibt es einen Workaround oder eine Möglichkeit, die Seite so zu gestalten, dass sie in Firefox und Safari nicht herumspringt?

Gracias.

Answer 1

Sie können die Bildlaufleiste einfach immer aktivieren:

html{
 overflow: scroll;
}

aber dann hätten Sie auch die horizontale Bildlaufleiste, das ist besser:

html{
   overflow-y:scroll;
   overflow-x:auto;
}

So können Sie nur vertikal und bei Bedarf auch horizontal blättern.

Answer 2

Diese Website enthält ein Javascript zur Behebung des Problems, das IMO eine bessere Lösung ist als die derzeitige (eine permanente Bildlaufleiste):

http://www.johnpezzetti.com/2011/01/31/removing-vertical-scrollbar-jump-shift-problem-a-javascript-fix-for-all-browsers

Dieses Skript wartet, bis das DOM geladen ist, und prüft dann, ob eine Bildlaufleiste aktiv ist. Wenn ja, wird die Breite der Bildlaufleiste berechnet und marginLeft des Körpers auf diese Breite gesetzt. Dies gleicht die Verschiebung aus, und da es bei DOM-Last ausgeführt wird, ist es sofort wirksam.