CSS-свойство `overscroll-behavior-inline`

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

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

Синтаксис

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

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

Значения

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

auto

Используется стандартное поведение переполнения прокрутки.

contain

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

none

Соседние области прокрутки не участвуют в цепочке прокрутки, а стандартное поведение переполнения прокрутки отключается.

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

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

overscroll-behavior-inline = 
  contain |
  none |
  auto

Примеры

Предотвращение избыточной прокрутки во встроенном направлении

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

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

HTML

<main>
  <div>
    <div>
      <p>
        <code>overscroll-behavior-inline</code> has been used to make it so that
        when the scroll boundaries of the yellow inner box are reached, the
        whole page does not begin to scroll.
      </p>
    </div>
  </div>
</main>

CSS

main {
  height: 400px;
  width: 3000px;
  background-color: white;
  background-image: repeating-linear-gradient(
    to right,
    transparent 0px,
    transparent 19px,
    rgb(0 0 0 / 50%) 20px
  );
}

main > div {
  height: 300px;
  width: 400px;
  overflow: auto;
  position: relative;
  top: 50px;
  left: 50px;
  overscroll-behavior-inline: contain;
}

div > div {
  height: 100%;
  width: 1500px;
  background-color: yellow;
  background-image: repeating-linear-gradient(
    to right,
    transparent 0px,
    transparent 19px,
    rgb(0 0 0 / 50%) 20px
  );
}

p {
  padding: 10px;
  background-color: rgb(255 0 0 / 50%);
  margin: 0;
  width: 360px;
  position: relative;
  top: 10px;
  left: 10px;
}

Результат

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

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

См. также

• overscroll-behavior
• overscroll-behavior-x
• overscroll-behavior-y
• overscroll-behavior-block
• Модуль CSS overscroll behavior