Свойство CSS `overscroll-behavior-x`

Базовая поддержка Ограниченная доступность

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

Свойство overscroll-behavior-x CSS задаёт поведение браузера при достижении горизонтальной границы области прокрутки.

Полное описание см. в разделе overscroll-behavior.

Синтаксис

/* Keyword values */
overscroll-behavior-x: auto; /* default */
overscroll-behavior-x: contain;
overscroll-behavior-x: none;

/* Global values */
overscroll-behavior-x: inherit;
overscroll-behavior-x: initial;
overscroll-behavior-x: revert;
overscroll-behavior-x: revert-layer;
overscroll-behavior-x: unset;

Значения

Это свойство задаётся одним из следующих ключевых слов:

auto: Используется обычное поведение по умолчанию при переполнении области прокрутки.
contain: Используется поведение по умолчанию при переполнении области прокрутки (например, эффект «отскока») внутри элемента, для которого задано это значение. Однако соседние области прокрутки не участвуют в цепочке прокрутки; лежащие под ним элементы не прокручиваются. Значение contain отключает встроенную навигацию браузера, включая жест вертикального потягивания для обновления страницы и горизонтальную навигацию с помощью свайпа.
none: Прокрутка не передаётся соседним областям, а поведение по умолчанию при переполнении области прокрутки отключается.

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

Начальное значение	auto
Применяется к	блочным элементам, не являющимся замещаемыми, и строчным блочно-строчным элементам, не являющимся замещаемыми
Наследуется	нет
Вычисленное значение	как задано
Тип анимации	дискретный

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

overscroll-behavior-x = 
  contain |
  none |
  auto

Примеры

Запрет горизонтальной прокрутки нижележащего элемента

В нашем примере overscroll-behavior-x (см. также исходный код) есть два блочных контейнера, один внутри другого. Для внешнего контейнера задана большая width, поэтому страница прокручивается по горизонтали. Для внутреннего контейнера заданы небольшая ширина (и height), благодаря чему он удобно размещается в области просмотра, но его содержимому задана большая width, поэтому оно прокручивается по горизонтали.

По умолчанию, когда внутренняя область прокручивается и достигается её граница прокрутки, начинает прокручиваться вся страница, что, вероятно, нежелательно. Чтобы этого избежать, задайте для внутреннего контейнера overscroll-behavior-x: contain:

main > div {
  height: 300px;
  width: 500px;
  overflow: auto;
  position: relative;
  top: 100px;
  left: 100px;
  overscroll-behavior-x: contain;
}

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

Спецификация
Модуль CSS Overscroll Behavior, уровень 1 # overscroll-behavior-longhands-physical

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

	Настольные компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android	WebView на iOS
`overscroll-behavior-x`	144 63–144 Свойство не влияет на контейнеры прокрутки, у которых нет прокручиваемого содержимого, выходящего за границы.	18	150 59–150 Свойство не влияет на контейнеры прокрутки, у которых нет прокручиваемого содержимого, выходящего за границы.	128 50–128 Свойство не влияет на контейнеры прокрутки, у которых нет прокручиваемого содержимого, выходящего за границы.	16 Свойство не влияет на контейнеры прокрутки, у которых нет прокручиваемого содержимого, выходящего за границы.	144 63–144 Свойство не влияет на контейнеры прокрутки, у которых нет прокручиваемого содержимого, выходящего за границы.	150 59–150 Свойство не влияет на контейнеры прокрутки, у которых нет прокручиваемого содержимого, выходящего за границы.	95 46–95 Свойство не влияет на контейнеры прокрутки, у которых нет прокручиваемого содержимого, выходящего за границы.	16 Свойство не влияет на контейнеры прокрутки, у которых нет прокручиваемого содержимого, выходящего за границы.	8.0 Свойство не влияет на контейнеры прокрутки, у которых нет прокручиваемого содержимого, выходящего за границы.	144 63–144 Свойство не влияет на контейнеры прокрутки, у которых нет прокручиваемого содержимого, выходящего за границы.	16 Свойство не влияет на контейнеры прокрутки, у которых нет прокручиваемого содержимого, выходящего за границы.
`auto`	63	18	59	50	16	63	59	46	16	8.0	63	16
`chain`	150	150	Нет	134	Нет	150	Нет	101	Нет	Нет	150	Нет
`contain`	63	18	59	50	16	63	59	46	16	8.0	63	16
`none`	63	79 18–79 Значение `none` ошибочно ведёт себя как `contain` (допуская упругий эффект отскока).	59	50	16	63	59	46	16	8.0	63	16

См. также

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/overscroll-behavior-x