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

Предыдущая страница overscroll-behavior
Следующая страница overscroll-behavior-inline

Определение и использование

overscroll-behavior-block Свойство используется для отключения цепочки скроллинга (scroll chaining) или обратной связи при переборке (overscroll affordance) на элементе при попытке прокрутки за пределы границ скроллинга в блоковом направлении.

Цепочка скроллинга - это поведение родительского элемента, которое инициируется чрезмерным скроллингом в одном элементе. Это поведение по умолчанию.

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

CSS overscroll-behavior-block и overscroll-behavior-inline Атрибуты связаны с overscroll-behavior-x и overscroll-behavior-y Атрибуты очень похожи, но overscroll-behavior-block и overscroll-behavior-inline Атрибут зависит от направления блока и направления инлайн.

Обратите внимание:Связанные CSS атрибуты writing-mode Определяет направление блока. Это влияет на то, будет ли направление блока направлено по оси x или оси y, а также overscroll-behavior-block Результат атрибута. Для английских страниц, направление блока направлено вниз, а направление инлайн направлено слева направо.

Пример

Пример 1

Закрыть цепочку скроллинга для滚动的 <div> в направлении блока:

#yellowDiv {
  overscroll-behavior-block: contain;
}

Попробуйте сами

Пример 2: Сочетание атрибута writing-mode

Установить для элемента <div> writing-mode Когда значение атрибута установлено в 'vertical-rl', направление блока становится направлением x, поэтому overscroll-behavior-block Теперь это действует в направлении x, а не y:

#yellowDiv {
  writing-mode: vertical-rl;
  overscroll-behavior-block: contain;
}

Попробуйте сами

CSS синтаксис

overscroll-behavior-block: auto|contain|none|initial|inherit;

Значение атрибута

Значение	Описание
auto	Позволяет поведение цепочки скроллинга и обратную связь при перетаскивании. Значение по умолчанию.
contain	Позволяет обратную связь при перетаскивании, но не позволяет поведение цепочки скроллинга.
none	Не позволяет обратную связь при перетаскивании и поведение цепочки скроллинга.
initial	Установить этот атрибут в его значение по умолчанию. См. также: initial.
inherit	Этот атрибут наследуется от родительского элемента. См. также: inherit.

Технические детали

Значение по умолчанию:	auto
Инheritance:	Нет
Создание анимации:	Не поддерживается. См. также:Атрибуты анимации.
Версия:	CSS3
JavaScript синтаксис:	object.style.overscrollBehaviorBlock="none"