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

Ссылки

Источник: https://www.kobzarev.com/makeup/fix-jumping-scrollbar/

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

Суровый русский тимлид. Жил в Магадане, в офисе московских веб студий и в Тульской деревне. Виртуозно знает WordPress, PHP, ООП, Vue.js и вот это вот все. Делает крутые высоконагруженные сайты, поэтому уже почти захватил весь рынок WordPress разработки в России. Не дает никому делать сайты без спроса. Ведет блог о разработке, дайджест в телеграмме и в ВК. Любит сиськи, баню и радиоэлектронику. 100% патриот (но это не точно). Тролль 542 уровня. Ездит в отпуск раз в 5 лет.

Добавить комментарий

%d такие блоггеры, как: