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

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

Попробуйте

overscroll-behavior: auto;

overscroll-behavior: contain;

overscroll-behavior: none;

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="box">
      This is a scrollable container. Michaelmas term lately over, and the Lord
      Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. As
      much mud in the streets as if the waters had but newly retired from the
      face of the earth.
      <br /><br />
      Lorem Ipsum has been the industry's standard dummy text ever since the
      1500s, when an unknown printer took a galley of type and scrambled it to
      make a type specimen book. It has survived not only five centuries, but
      also the leap into electronic typesetting, remaining essentially
      unchanged.
    </div>
    <div id="example-element">
      This is the inner container. Focus on this container, scroll to the bottom
      and when you reach the bottom keep scrolling.
      <p>
        If you have
        <code class="language-css">overscroll-behavior: auto;</code> selected
        the outer container will start to scroll.
      </p>
      If you have
      <code class="language-css">overscroll-behavior: contain;</code> selected,
      the outer container will not scroll unless you move your cursor out of the
      inner container and try to perform scroll on the outer container.
    </div>
  </div>
</section>

.example-container {
  width: 35em;
  height: 18em;
  border: medium dotted;
  padding: 0.75em;
  text-align: left;
  overflow: auto;
  display: flex;
}

.box {
  width: 50%;
}

#example-element {
  width: 50%;
  height: 12em;
  border: medium dotted #1b76c4;
  padding: 0.3em;
  margin: 0 0.3em;
  text-align: left;
  overflow: auto;
  overscroll-behavior: contain;
}

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

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

• overscroll-behavior-x
• overscroll-behavior-y

Синтаксис

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

Контейнер прокрутки без прокручиваемого переполнения, например элемент с overflow: hidden, всегда считается находящимся на границе прокрутки. Поэтому установка для него нестандартного значения overscroll-behavior, например contain или none, предотвратит передачу цепочки прокрутки родительским контейнерам прокрутки. Это можно использовать, чтобы запретить прокрутку фона, пока открыто диалоговое окно или наложение.

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

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

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

Примеры

Запрет прокрутки расположенного под ним элемента

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

Обе области прокручиваются. Обычно, если прокручивать окно чата до достижения границы прокрутки, начинает прокручиваться и расположенное под ним окно с контактами, что нежелательно. Это можно предотвратить, задав окну чата 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 при переполнении прокрутки
• Модуль якорения прокрутки CSS
• Возьмите прокрутку под контроль: настройка обновления потягиванием и эффектов переполнения на developer.chrome.com (2017)