Свойство CSS `scrollbar-gutter`

Свойство scrollbar-gutter CSS позволяет авторам резервировать место для полосы прокрутки, предотвращая нежелательные изменения макета при увеличении содержимого и избегая лишних визуальных элементов, когда прокрутка не требуется.

Поле полосы прокрутки элемента — это пространство между внутренним краем границы и внешним краем поля, где браузер может отображать полосу прокрутки. Если полоса прокрутки отсутствует, поле будет окрашено как продолжение поля элемента.

Браузер определяет, будут ли использоваться классические или наложенные полосы прокрутки:

• Классические полосы прокрутки всегда размещаются в поле, занимая место при отображении.
• Наложенные полосы прокрутки размещаются поверх содержимого, а не в поле, и обычно частично прозрачны.

Синтаксис

/* Initial value */
scrollbar-gutter: auto;

/* "stable" keyword, with optional modifier */
scrollbar-gutter: stable;
scrollbar-gutter: stable both-edges;

/* Global values */
scrollbar-gutter: inherit;
scrollbar-gutter: initial;
scrollbar-gutter: revert;
scrollbar-gutter: revert-layer;
scrollbar-gutter: unset;

Значения

auto

Начальное значение. Классические полосы прокрутки создают поле, когда overflow имеет значение scroll, либо когда overflow имеет значение auto и содержимое блока выходит за его границы. Наложенные полосы прокрутки не занимают места.

stable

При использовании классических полос прокрутки поле будет присутствовать, если overflow имеет значение auto, scroll или hidden, даже если содержимое блока не выходит за его границы. При использовании наложенных полос прокрутки поле отсутствует.

both-edges

Если поле присутствовало бы у одного из логических начального или конечного краёв блока, оно также будет присутствовать у противоположного края.

Формальное определение

Формальный синтаксис

scrollbar-gutter = 
  auto |
  stable &&
  both-edges?

Примеры

В примерах ниже показано, как различные значения свойства scrollbar-gutter влияют на прокручиваемый элемент div (.container), содержащий один или несколько абзацев.

Пример 1

Чтобы предотвратить ненужные изменения макета при появлении или исчезновении полосы прокрутки из-за увеличения или уменьшения содержимого, для неё резервируется место.

.container {
  scrollbar-gutter: stable;
}

Пример 2

Добавьте симметричные отступы с обеих сторон блока, чтобы содержимое располагалось по центру:

.container {
  scrollbar-gutter: stable both-edges;
}

Пример 3

Выровняйте содержимое непрокручиваемого элемента и расположенного рядом с ним прокручиваемого элемента. В этом примере показаны два блока div рядом друг с другом. У левого прокрутки нет, а у правого она есть. Для обоих задано scrollbar-gutter, что также резервирует место для левого блока div, содержимое которого не прокручивается. Это хороший способ сохранить одинаковую ширину содержимого.

.container1 {
  overflow: hidden;
  scrollbar-gutter: stable;
}

.container2 {
  scrollbar-gutter: stable;
}

Наложенные полосы прокрутки

Для сравнения на этом изображении показан тот же блок div, что и выше, но системные настройки пользователя заданы для наложенных полос прокрутки. Обратите внимание: полоса прокрутки отображается только во время прокрутки пользователем и поверх содержимого, поэтому для неё не резервируется место и свойство scrollbar-gutter не действует.

Спецификации

Совместимость с браузерами

См. также

• Модуль переполнения CSS
• Модуль оформления полос прокрутки CSS
• overflow
• scrollbar-width
• scrollbar-color