overscroll-behavior

Baseline 2022

Новое

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

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

Попробовать

Составные свойства

Это свойство является сокращением для следующих свойств CSS:

Синтаксис

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

/* Two values */
overscroll-behavior: auto contain;

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

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

Два ключевых слова задают значение overscroll-behavior для осей x и y соответственно. Если указано только одно значение, то для обеих осей x и y предполагается одно и то же значение.

Значения

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

Описание

По умолчанию мобильные браузеры, как правило, предоставляют эффект «отскока» или даже обновление страницы при достижении верхней или нижней границы страницы (или другой области прокрутки). Вы, возможно, также заметили, что при наличии диалогового окна со скроллируемым содержимым в верхней части страницы, которая также имеет скроллируемое содержимое, после достижения границы прокрутки диалогового окна, подлежащая страница начнет прокручиваться — это называется цепной прокруткой.

В некоторых случаях эти поведения нежелательны. Можно использовать overscroll-behavior для устранения нежелательной цепной прокрутки и поведения «перетащить для обновления», вдохновленного приложениями Facebook/Twitter.

Обратите внимание, что это свойство применяется только к контейнерам прокрутки. В частности, поскольку <iframe> не является контейнером прокрутки, установка этого свойства на iframe не оказывает никакого влияния. Для управления цепной прокруткой из iframe установите overscroll-behavior как на элементе <html>, так и на элементе <body> документа iframe.

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

Начальное значение	`auto`
Применимо к	незамещающим блочным элементам и незамещающим inline-блочным элементам
Наследуется	нет
Вычисленное значение	как каждое из свойств сокращённого обозначения: `overscroll-behavior-x`: как указано `overscroll-behavior-y`: как указано
Тип анимации	дискретный

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

overscroll-behavior = 
  [ contain | none | auto ]{1,2}

Примеры

Предотвращение прокрутки подлежащего элемента

В нашем примере overscroll-behavior (см. также исходный код) мы представляем список фейковых контактов на всю страницу и диалоговое окно с окном чата.

A popup chat window titled 'Active chat', showing a conversation between Chris and Bob. Behind the chat window is a contact list titled 'overscroll-behavior demo'.

Обе эти области прокручиваются; обычно, если вы прокрутите окно чата до достижения границы прокрутки, подлежащее окно контактов также начнёт прокручиваться, что нежелательно. Это можно остановить, используя overscroll-behavior-y (также подойдёт overscroll-behavior) на окне чата, как показано ниже:

.messages {
  height: 220px;
  overflow: auto;
  overscroll-behavior-y: contain;
}

Мы также хотели избавиться от стандартных эффектов переполнения при прокрутке контактов до начала или конца (например, Chrome на Android обновляет страницу при прокрутке до начала). Это можно предотвратить, установив overscroll-behavior: none на элементе <html>:

html {
  margin: 0;
  overscroll-behavior: none;
}

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

Спецификация
CSS Overscroll Behavior Module Level 1 # overscroll-behavior-properties

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`overscroll-behavior`	63	18	59	50	16	63	59	46	16	8.0	63
`auto`	63	79	59	50	16	63	59	46	16	8.0	63
`contain`	63	79	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

См. также

Модуль CSS overscroll behavior
Взять под контроль прокрутку: настройка эффектов переполнения и pull-to-refresh на developer.chrome.com (2017)

© 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