Как компенсировать вертикальную полосу прокрутки, когда ее еще нет

Question

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

Проще говоря, я сосредоточил большинство своих веб-страниц в широких пределах.view-ports.

Например, view-port может иметь разрешение 1028 пикселей, и я хочу, чтобы ширина моей страницы составляла только 960 пикселей.

Так что мой css выглядит так:

#pageWrapper { /* page width is 960 pixels */
    margin:0 auto;
    width:960px;
}

Нет проблем с этим.

Проблема возникает, когда я запускаю динамическую страницу, которая короче высоты, а затем моя страница расширяется (через jQuery slideOut и т. Д.) Ниже нижней частиэкран и заставляет появиться вертикальная полоса прокрутки.

В конечном итоге, во время слайд-аута мерцают страницы влево, а во время слайдов - мерцают вправо.

Есть ли какой-то путь через css, чтобы заставить 20pxПравое поле и по-прежнему использовать margin:0 auto;?

Спасибо.

Answer 1

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

Существует несколько способов управления этим, но наиболее распространенным является либо сделать так, чтобы у вас всегда была полоса прокрутки, либо никогда не было полосы прокрутки с помощью свойства overflow-ywindow.

Настройка overflow-y: scroll заставит полосы прокрутки всегда быть там.

Настройка overflow-y: hidden приведет к тому, что никогда не будет полос прокрутки.

Answer 2

NB: overflow-y: hidden предотвращает прокрутку пользователя любым способом, эффективно делая любой контент ниже нижнего окна просмотра недоступным.