Длинные страницы в смещении FireFox при появлении полосы прокрутки

В Firefox и Safari страницы, расположенные по центру, перемещаются на несколько пикселей, когда страница достаточно длинная для появления полосы прокрутки. Если вы перемещаетесь по сайту с длинными и короткими страницами, страница, похоже, "прыгает".

IE7 имеет тенденцию оставлять полосу прокрутки видимой все время, но отключает ее, когда страница не достаточно длинная. Поскольку ширина окна HTML никогда не изменяется, центрирование страницы не изменяется.

Есть ли способ обхода или способ стилизации страницы, чтобы он не перескакивал в Firefox и Safari?

Спасибо.

Ответ 1

Вы всегда можете включить панель прокрутки:

html{
 overflow: scroll;
}

но это даст вам горизонтальную полосу прокрутки, это лучше:

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

Это даст вам только вертикальную прокрутку и по горизонтали, когда это необходимо.

Ответ 2

Этот сайт содержит javascript, чтобы исправить проблему, которая является лучшим решением IMO, чем текущая (постоянная полоса прокрутки):

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

Этот script ждет, пока DOM будет загружен, а затем проверит, активна ли полоса прокрутки. Если это так, , он вычисляет ширину полосы прокрутки и устанавливает bodys marginLeft равным этой ширине. Это смещает сдвиг, и поскольку он работает на загрузке DOM, он принимает мгновенный эффект.