Убрать сдвиг сайта при появлении полосы прокрутки | CSS

Если сайт размещён по центру окна браузера (содержимое ограничено зелёными линиями), то при переходе с короткой страницы на длинную контент дёргается влево на небольшое расстояние, равное ширине вертикальной полосы прокрутки (scrollbar).

<style>
header, main, footer {
  max-width: 500px;
  margin: 0 auto;
  border-left: 1px solid green;
  border-right: 1px solid green;
}
</style>

<main><a href='#'>Ссылка</a> …</main>

Чтобы сайт не сдвигался, полосу прокрутки добавляют на все страницы сайта. Там, где она не нужна, scrollbar окрашен в серый неактивный цвет.

<style>
html {
  overflow-y: scroll;
}
header, main, footer {
  max-width: 500px;
  margin: 0 auto;
  border-left: 1px solid green;
  border-right: 1px solid green;
}
</style>

<main><a href='#'>Ссылка</a> …</main>

Более интересное решение показано на aykevl.nl.

<style>
header, main, footer {
  max-width: 500px;
  margin: 0 auto;
  border-left: 1px solid green;
  border-right: 1px solid green;
}
@media screen and (min-width: 500px) {/* если окно браузера больше максимальной ширины сайта */ 
  html {
    margin-left: calc(100vw - 100%);
    margin-right: 0;
  }
}
</style>

<main><a href='#'>Ссылка</a> …</main>
100vw — это ширина <html> с полосой прокрутки или без неё при её отсутствии. То есть при наличии scrollbar, отступ справа (вертикальная полоса прокрутки) будет компенсирован отступом слева.
в f t
наверх ↑

3 комментария:

Анонимный
Спасибо =) Несколько раз сталкивался с этой дурацкой проблемой
Ruslan Gruscthak
https://www.youtube.com/watch?v=f6MTUfbpdoM
NMitra
Ruslan Gruscthak, не стоит эффект затрачиваемых ресурсов