overscroll-behavior-x

Baseline 2022

Доступно с недавнего времени

С сентября 2022 года эта функция работает на последних версиях устройств и браузеров. Возможно, она не будет работать на старых устройствах или браузерах.

Свойство 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;

Свойство overscroll-behavior-x задаётся ключевым словом из списка значений ниже.

Значения

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

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

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

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

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 Module Level 1 # overscroll-behavior-longhands-physical

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`overscroll-behavior-x`	63	18	59	50	16	63	59	46	16	8.0	63
`auto`	63	18	59	50	16	63	59	46	16	8.0	63
`contain`	63	18	59	50	16	63	59	46	16	8.0	63
`none`	63	79 18–79 Значение `none` неправильно ведет себя как `contain` (разрешая эффект упругого отскока).	59	50	16	63	59	46	16	8.0	63

См. также

© 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/overscroll-behavior-x