Scrollbar и центрирование

Столкнулся сегодня с косяком, допустим есть однотипные страницы, на которых основной контент автоматически центрируется.

#content {
   margin: 0 auto;
}

Так вот, при загрузке страницы, до момента пока основной контент еще не подгрузился, а шапка уже появилась, то scroll'a справа нету, как только контент подгружается, то сбоку появляется scrollbar и весь контент из-за этого прыгает на несколько пикселей влево. В целом этот баг можно решить, если задать основному блоку min-height, но это не универсальное решение. Тем более это может вызывать косяки, если вдруг окажется, что контента у нас на странице нету, будет большой вентум.

Думали-думали, не знали что делать, в итоге решили сделать как у fb, что бы скроллбар был всегда на странице, не важно активный или нет.

body {
   overflow-y: scroll;
}

Возможно это не самое лучшее решение, но гарантировано убирает проблему с прыганьем контента и избавляет от вероятности появления вентумов на странице.

Может расскажите другие способы решения?

  5 комментариев   15 августа 2011   Заметки  

  • dotfinal

    можно поюзать другое центрирование
    body {
    top:0;
    left:50%;
    margin-left:-x;
    }
    где х = разрешие экрана по оси х (то есть ширина, грубо говоря) деленная на два. это уже через пхп вычисляем.
    если скролл появляется, разрешение-то остается тоже и боди также в центре
    даже кроссбраузерно

    • http://blog.rpsl.info Rpsl

      через пыху ты не доберешься до значения броузера, т.к. они доступны только в JS, но даже будь это так, то генерить ширину через пыху — это пиздос, а не решение.

      • dotfinal

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

        • http://blog.rpsl.info Rpsl

          Проблема в том, что используя JS мы все равно получем скачек, т.к. JS выполнится после срабатывания DOM.ready(). То, о чем ты говоришь это не плагин к цсс, а цсс3, который поддерживают не все броузеры, а даже если это плагин, то он на JS и опять не подходит нам.

  • Financi

    Посмотрите как сделано в контакте! Вот это выход. Скролл появляется и исщезает незаметно, но как это делается??