overscroll-behavior-inline

/* 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;

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

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,
    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-inline: contain;
}

div > div {
  height: 100%;
  width: 1500px;
  background-color: yellow;
  background-image: repeating-linear-gradient(
    to right,
    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: 360px;
  position: relative;
  top: 10px;
  left: 10px;
}

Результат

• overscroll-behavior
• overscroll-behavior-x
• overscroll-behavior-y
• overscroll-behavior-block
• Модуль CSS поведения переполнения при прокрутке