Des pages longues dans le décalage FireFox lorsque la barre de défilement apparaît

Question

Dans Firefox et Safari, les pages centrées déplacent quelques pixels lorsque la page est suffisamment longue pour que la barre de défilement apparaisse. Si vous naviguez à travers un site qui a des pages longues et courtes, la page semble "sauter" autour.

IE7 a tendance à laisser la barre de défilement visible tout le temps mais la désactive lorsque la page n'est pas assez longue. Depuis la largeur de la fenêtre HTML ne change jamais le centrage de la page ne change pas.

Y a-t-il une solution de contournement ou un moyen de styliser la page afin qu'elle ne saute pas dans Firefox et Safari?

Merci.

Answer 1

Vous pouvez simplement toujours activer la barre de défilement:

html{ 
overflow: scroll; 
} 

mais qui vous donnera la barre de défilement horizontale aussi, ce qui est mieux:

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

Cela vous donnera seulement le défilement vertical et la horizontal si nécessaire.

Answer 2

Ce site contient un javascript pour résoudre le problème qui est une meilleure solution OMI que l'actuel (une barre de défilement permanent):

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

Ce script attend jusqu'à ce que le DOM est chargé puis vérifie si une barre de défilement est active. Si c'est le cas, calcule la largeur de la barre de défilement et définit la marge du corps à cette largeur. Ceci décale le décalage et, puisqu'il s'exécute sur la charge du DOM, il prend effet instantanément.