scrollbar-gutter

Ограниченная доступность

Эта функция не относится к Baseline, так как она не работает во всех наиболее широко используемых браузерах.

Свойство 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: Если гуттер будет присутствовать на одном из краёв (в начало/конец строки) области, то другой будет присутствовать и на противоположном крае.

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

Начальное значение	`auto`
Применяется к	областям прокрутки
Наследуется	нет
Вычисленное значение	как указано
Тип анимации	дискретный

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

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

Примеры

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

Примечание: На изображениях в примерах настройки системы пользователя установлены на классические полосы прокрутки (всегда отображаются).

Пример 1

Предотвращение ненужных изменений макета, когда появление/исчезновение полосы прокрутки вызвано изменением содержимого, резервируется место для неё.

.container {
  scrollbar-gutter: stable;
}

A containing div element with a paragraph of text inside and a space to the right where the scrollbar is

Пример 2

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

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

A containing div element with a paragraph of text inside, a space to the right where the scrollbar is and a matching empty space to the left

Пример 3

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

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

.container2 {
  scrollbar-gutter: stable;
}

Two adjacent divs containing text, both with space for a scrollbar

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

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

One div with text, no visible scrollbar

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

Спецификация
CSS Overflow Module Level 3 # scrollbar-gutter-property

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`scrollbar-gutter`	94	94	97	80	18.2	94	97	66	18.2	17.0	94
`auto`	94	94	97	80	18.2	94	97	66	18.2	17.0	94
`stable`	94	94	97	80	18.2	94	97	66	18.2	17.0	94

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter