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

Ссылки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

DoctorDred
DoctorDred
1 год назад

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

Владислав
Владислав
1 год назад

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

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

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

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

Давайте дружить
в Telegram

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