A propriedade CSS overscroll-behavior-block

Página anterior overscroll-behavior
Próxima página overscroll-behavior-inline

Definição e uso

overscroll-behavior-block A propriedade é usada para desativar a cadeia de rolagem (scroll chaining) ou o feedback de rolagem excessiva (overscroll affordance) no elemento ao tentar rolar além dos limites de rolagem.

滚动链是指在一个元素上过度滚动会导致父元素的滚动行为。这是默认行为。

Scroll chain refers to the scroll behavior of the parent element when over-scrolling occurs on an element. This is the default behavior.

Over-scroll feedback is the feedback given when the user tries to scroll beyond the scroll boundary. For example, on mobile devices, when trying to scroll beyond the top of the page, there is usually a visual feedback of page refresh. overscroll-behavior-block properties are very similar, but overscroll-behavior-inline CSS property is related to properties are very similar, but overscroll-behavior-x overscroll-behavior-y overscroll-behavior-block properties are very similar, but overscroll-behavior-inline and

The property depends on the block direction and inline direction.Note: writing-mode Related CSS properties overscroll-behavior-block It defines the block direction. This affects whether the block direction is in the x direction or y direction, and

Property result. For English pages, the block direction is downward, and the inline direction is from left to right.

Instance

Example 1

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

Try it yourself

Example 2: Combining the writing-mode property

Sets the writing-mode When the property value is set to 'vertical-rl', the block direction becomes the x direction, so overscroll-behavior-block Now it works in the x direction instead of the y direction:

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

Try it yourself

CSS Syntax

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

Property value

Value	Description
auto	Allows scroll chain and over-scroll feedback behavior. Default value.
contain	Allows over-scroll feedback behavior but does not allow scroll chain.
none	Does not allow over-scroll feedback or scroll chain behavior.
initial	Sets this property to its default value. See initial.
inherit	Inherits this property from its parent element. See inherit.

Technical details

Default value:	auto
Inheritance:	No
Animation creation:	Not supported. See:Animation-related properties.
Version:	CSS3
JavaScript Syntax:	object.style.overscrollBehaviorBlock="none"