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

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

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

Синтаксис

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

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

Значения

Для этого свойства можно указать одно из следующих ключевых слов:

auto

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

contain

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

none

Прокрутка не передаётся соседним прокручиваемым областям, а стандартное поведение переполнения прокрутки отключается.

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

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

overscroll-behavior-block = 
  contain |
  none |
  auto

Примеры

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

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

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

HTML

<main>
  <div>
    <div>
      <p>
        <code>overscroll-behavior-block</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: 3000px;
  width: 500px;
  background-color: white;
  background-image: repeating-linear-gradient(
    to bottom,
    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-block: contain;
}

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

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

Результат

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

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

См. также

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