scrollbar-gutter

Добавляем отступ под скроллбар, чтобы его появление или скрытие не вызывало сдвиги контента.

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

scrollbar-gutter решает проблему с «прыгающей» шириной контента при появлении или скрытии скроллбара. Обычно эта проблема появляется при изменении высоты контента или появлении модального окна.

Проблема со скроллбаром

Секция статьи "Проблема со скроллбаром"

В примере ниже у нас длина контента превышает высоту экрана, поэтому скроллбар виден всегда. Но при появлении модального окна мы прячем скроллбар, задав overflow: hidden у body. Это довольно частое решение — мы не хотим чтобы можно было прокручивать страницу при открытом модальном окне.

Открыть демо в новой вкладке

Но как это исправить? Можно компенсировать удаление скроллбара добавлением отступов у <body>, но мы сразу натыкаемся на ряд проблем:

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

Как-то выглядит совсем запутанно, и написать полноценное кроссбраузерное и кроссплатформенное решение, которое работает всегда и везде, займёт отнюдь не мало времени. К счастью, у нас есть замечательное свойство scrollbar-gutter.

Как пишется

Секция статьи "Как пишется"

У scrollbar-gutter 3 возможных значения:

  1. auto — дефолтное значение. Если задано overflow: scroll или overflow: auto и контент вызывает переполнение, то появится отступ для скроллбара.
  2. stable — отступ для скроллбара появляется если значение overflow равно hidden, scroll или auto, вне зависимости от того, вызывает контент переполнение или нет.
  3. stable both-edges — то же самое что и stable, но отступы будут создаваться с двух противоположных сторон. При вертикальной прокрутке — справа и слева, при горизонтальной — сверху и снизу.

Во всех случаях не будет создаваться отступ, если скроллбар — оверлейный.

В нашем случае используем scrollbar-gutter: stable чтобы при скрытии прокрутки через overflow: hidden у нас появился отступ вместо скроллбара и контент остался на месте.

        
          
          html,body {  scrollbar-gutter: stable;}
          html,
body {
  scrollbar-gutter: stable;
}

        
        
          
        
      
Открыть демо в новой вкладке

Поддержка

Секция статьи "Поддержка"

scrollbar-gutter поддерживается всеми современными браузерами, кроме Safari. Подробнее можно посмотреть на Can I Use.