CSS overscroll-behavior-inline property

Previous Page overscroll-behavior-block
Next Page overscroll-behavior-x

Definition and Usage

overscroll-behavior-inline The property is used to close the scroll chain or overscroll feedback of the element when attempting to scroll beyond the scroll boundary in the inline direction.

Note:To trigger overscroll-behavior in the inline direction, you may need to use a swipe gesture on the touchpad or touchscreen.

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.

CSS overscroll-behavior-inline and overscroll-behavior-block property is related to overscroll-behavior-x and overscroll-behavior-y properties are very similar, but overscroll-behavior-inline and overscroll-behavior-block The property depends on the block direction and inline direction.

Note:Related CSS properties writing-mode It defines the inline direction. This affects whether the inline direction is in the x-direction or y-direction, and overscroll-behavior-inline The result of the property. For English pages, the inline direction is from left to right, and the block direction is downward.

Instance

Example 1

Turn off the scroll chain for the scrollable <div> element in the inline direction:

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

Try it yourself

Example 2: Combined with the writing-mode property

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

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

Try it yourself

CSS syntax

overscroll-behavior-inline: 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	Disallows 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.overscrollBehaviorInline="none"