Xiper

«Дергание» сайта

Автор: Евгений Рыжков Дата публикации:

Проблема

Если переключаться между страницами на одной из которой контента много, а на другой мало, в браузерах отличных от IE видим «дергание» сайта — смещение всего сайта на пару десятков пикселей. Особенно это заметно по элементам, расположенным справа (если сайт резиновый) или по всему сайту (если статично). Узреть воочию (клацать ссылки в верхнем меню).

Теория

Во всех популярных браузерах за исключением Internet Explorer, вертикальная полоса прокрутки появляется только когда в этом есть необходимость, тем самым освобождая больше полезного пространства в окне браузера. Появление этой полосы прокрутки, при переходе со страницы, на которой ее не было, и приводит к такому смещению сайта. Аналогично будет смещение в обратную сторону, когда прокрутка спрячется при переходе с длинной страницы на короткую.

Решение

Принудительно показываем вертикальный скрол даже когда контента мало:

html {
	overflow-y: scroll;
}

Демо пример. Проверено в:

  • IE 6-8
  • Firefox 3.6
  • Opera 10.5
  • Safari 5
  • Chrome 6