Верх страницы
Обложка к записи Исправляем «прыгающий скролл» на чистом CSS
Время для прочтения: 0 мин. 9 сек.

Исправляем «прыгающий скролл» на чистом 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.

Ссылки

Автор: Кобзарёв Михаил

Русский разработчик со стажем. Работаю с PHP, ООП, JavaScript, Git, WordPress, Joomla, Drupal, Opencart, Laravel, Moonshine.

Оптимизирую сайты под Google Page Speed, настраиваю импорты для больших магазинов на WooCommerce + WP All Import. Пишу плагины на заказ. Все мои услуги.

Веду блог о разработке, дайджест в телеграмме и в ВК.

Вы всегда можете нанять меня.

Комментарии
Подписаться
Уведомить о
guest

15 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
AntonMMF
AntonMMF
9 лет назад

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

mihdan
9 лет назад
Ответить на  AntonMMF

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

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

AntonMMF
AntonMMF
9 лет назад
Ответить на  mihdan

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

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

mihdan
9 лет назад
Ответить на  AntonMMF

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

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

Bogdan Chadkin
Bogdan Chadkin
9 лет назад

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

mihdan
9 лет назад
Ответить на  Bogdan Chadkin

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

Bogdan Chadkin
Bogdan Chadkin
9 лет назад
Ответить на  mihdan

http://codepen.io/TrySound/pen/zxZeGj
Но контент четко выравнивается.

Николай Мороз
Николай Мороз
3 лет назад

А почему заедает скролл при попытке прокрутки? Вот пример.
Помогите разобраться

Николай Мороз
Николай Мороз
3 лет назад

Помогите избавиться от проблемы. На одной из страниц я разместил большую таблицу и добавил к ней скролл. Но он не работает корректно. Он скачет.
У меня не получается решить эту проблему, в поисках решения я попал на ваш сайт.

DoctorDred
DoctorDred
20 дней назад

Спасибо большое за помощь. Был прыгающий скоро на мобильной версии сайта. Очень раздражал. Сейчас всё отлично.

Владислав
Владислав
19 дней назад

В меню категорий, категория — образовательные. На мобильной версии, если нажать на самую нижнюю подкатегорию происходит внезапный скролл вниз. Как фиксить не представляю.

В js при нажатии на подкатегорию никаких скроллов не настраивал.
На айфоне скролл не прыгает, только на андроид и моб версии пк.
Ваш способ с margin попробовал, не помогает.

overflow-y: scroll; не помогает, но мне это и не нужно, нужно скрывать скролл.

Последний раз редактировалось 19 дней назад Владислав ем
Предыдущая запись

Давайте дружить
в Телеграме

Авторский блог вашего покорного слуги в Telegram про web, программирование, алгоритмы, инструменты разработчика, WordPress, Joomla, Opencart, Laravel, Moonshine, фильмы и сериалы