Время для прочтения: 0 мин. 45 сек.

Исправляем «прыгающий скролл» на чистом CSS

Когда вы центрируете веб-страницу на CSS при помощи margin: 0 auto, появляется один очень неприятный баг: сайт скачет при переходе между короткой и длинной страницами.

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

Классический фикс данной проблемы — всегда отображать вертикальную полосу прокрутки:


html {
    overflow-y: scroll;
}

Но с приходом CSS3 подход к решению данной проблемы изменился благодаря применению calc() и новой единицы измерения vm:


html {
    margin-left: calc(100vw - 100%);
    margin-right: 0;
}

Подсчёт ширины скроллбара работает только при условии, что для тега <html> установлено значение overflow: auto.

Но тут есть небольшая проблема: если вы используете адаптивный веб-дизайн, то столкнётесь с тем, что margin-left больше чем margin-right, когда страница совсем маленькая.

Пофиксить можно совсем просто — использовать данный подход только на широких экранах (больше 960 пикселей), для чего можно задействовать медиа-выражения в CSS:


@media screen and (min-width: 960px) {
    html {
        margin-left: calc(100vw - 100%);
        margin-right: 0;
    }
}

Данный подход работает в IE9+, Chrome и Firefox, но не работает в Opera и Safari 7.

Ссылки

Для вставки кода используйте HTML-теги
<pre><code class="php">ваш код</code></pre>

  • Bogdan Chadkin

    А что с полноширинными блоками?
    У меня появляется белая полоска слева.

    • Покажите пример на реальном сайте или codepen, например

  • AntonMMF

    А можно пояснить зачем усложнять себе жизнь, когда css-решение из одной строки исправно работает?

    • Вопрос из разряда: «зачем было изобретать колесо, ведь есть же ноги»

      Нужно двигаться в ногу с прогрессом, не спотыкаясь о костыли прошлого!

      • AntonMMF

        Это не ответ, у колеса хотя бы есть преимущества перед ногами, там процесс ради результата.

        В новом решении я никаких преимуществ не вижу, тут процесс ради процесса.

        • У каждой задачи есть несколько путей решения. Например, скруглить уголки можно картинками, дивами, svg, border-radius.

          Так и тут. Это всего лишь один путь решения. Использовать или нет — станет понятно из практики. Есть ситуации, когда overflow: scroll; использовать просто не получается.