Кратко
Скопированоscrollbar решает проблему с «прыгающей» шириной контента при появлении или скрытии скроллбара. Обычно эта проблема появляется при изменении высоты контента или появлении модального окна.
Проблема со скроллбаром
СкопированоВ примере ниже у нас длина контента превышает высоту экрана, поэтому скроллбар виден всегда. Но при появлении модального окна мы прячем скроллбар, задав overflow у body. Это довольно частое решение — мы не хотим чтобы можно было прокручивать страницу при открытом модальном окне.
Но как это исправить? Можно компенсировать удаление скроллбара добавлением отступов у <body>, но мы сразу натыкаемся на ряд проблем:
- Разные браузеры могут иметь разную ширину скроллбара. И даже если сейчас ширина скроллбара совпадает с общепринятой, разработчикам браузера ничего не мешает поменять её (хоть это и очень маловероятно) в одном из будущих обновлений.
- Есть два типа скроллбара — статичный и оверлей. Оверлей не виден по умолчанию, но появляется поверх страницы при её прокрутке. Если мы добавим отступ при оверлейном скроллбаре, мы не скомпенсируем, а наоборот, добавим сдвиг контента при открытии модалки.
Как-то выглядит совсем запутанно, и написать полноценное кроссбраузерное и кроссплатформенное решение, которое работает всегда и везде, займёт отнюдь не мало времени. К счастью, у нас есть замечательное свойство scrollbar.
Как пишется
СкопированоУ scrollbar 3 возможных значения:
auto— дефолтное значение. Если заданоoverflowили: scroll overflowи контент вызывает переполнение, то появится отступ для скроллбара.: auto stable— отступ для скроллбара появляется если значениеoverflowравноhidden,scrollилиauto, вне зависимости от того, вызывает контент переполнение или нет.stable both— то же самое что и- edges stable, но отступы будут создаваться с двух противоположных сторон. При вертикальной прокрутке — справа и слева, при горизонтальной — сверху и снизу.
Во всех случаях не будет создаваться отступ, если скроллбар — оверлейный.
В нашем случае используем scrollbar чтобы при скрытии прокрутки через overflow у нас появился отступ вместо скроллбара и контент остался на месте.
html,body { scrollbar-gutter: stable;}
html,
body {
scrollbar-gutter: stable;
}
Поддержка
Скопированоscrollbar поддерживается всеми современными браузерами, кроме Safari. Подробнее можно посмотреть на Can I Use.