overscroll-behavior-block

Базовая версия 2022

Новое свойство

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

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

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

Значения

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

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

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

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

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,
    rgb(0 0 0 / 0%) 0px,
    rgb(0 0 0 / 0%) 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,
    rgb(0 0 0 / 0%) 0px,
    rgb(0 0 0 / 0%) 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;
}

Результат

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

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

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`overscroll-behavior-block`	77	79	73	64	16	77	79	55	16	12.0	77
`auto`	77	79	73	64	16	77	79	55	16	12.0	77
`contain`	77	79	73	64	16	77	79	55	16	12.0	77
`none`	77	79	73	64	16	77	79	55	16	12.0	77

См. также

© 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-block