Atributo CSS overscroll-behavior-block

Página anterior overscroll-behavior
Página siguiente overscroll-behavior-inline

Definición y uso

overscroll-behavior-block La propiedad se utiliza para cerrar la cadena de desplazamiento (scroll chaining) o la retroalimentación de desplazamiento excesivo (overscroll affordance) en el elemento cuando se intenta desplazarse más allá de los límites del desplazamiento en la dirección del bloque.

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

Scrolling chain refers to the fact that overscrolling on one element will cause the scrolling behavior of the parent element. This is the default behavior.

Overscroll feedback is the feedback given when the user tries to scroll beyond the scroll boundaries. 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's properties are similar 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

The result of the property. 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: Combined with the writing-mode property

Sets the <div> element's writing-mode When the property value is set to 'vertical-rl', the block direction becomes the x-axis, so overscroll-behavior-block Now it works on the x-axis instead of the y-axis:

#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 scrolling chain and overscroll feedback behavior. Default value.
contain	Allows overscroll feedback behavior but does not allow scrolling chain.
none	Does not allow overscroll feedback or scrolling 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"