Proprietà CSS overscroll-behavior-x

Definition and usage

overscroll-behavior-x This property is used to turn off the scroll chain or over-scroll feedback when trying to scroll beyond the scroll boundary in the x direction.

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

Scroll chainMeans that over-scrolling on an element will cause the scrolling behavior of the parent element. This is the default behavior.

Over-scrollFeedback is the visual 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, it is usually accompanied by a visual refresh of the page.

Example

Turn off the scroll chain of the <div> element that can be scrolled in the x direction:

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

Try it yourself

CSS syntax

overscroll-behavior-x: 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.overscrollBehaviorX="none"

Browser support

The numbers in the table represent the first browser version to fully support this property.

Chrome Edge Firefox Safari Opera
63.0 18.0 * 59.0 16.0 50.0

* In Microsoft Edge, the property value none is considered as contain, which is incorrect.

相关页面

Riferimento:Proprietà CSS overscroll-behavior

Riferimento:Proprietà CSS overscroll-behavior-block

Riferimento:Proprietà CSS overscroll-behavior-inline

Riferimento:Proprietà CSS overscroll-behavior-y

Riferimento:Proprietà CSS scroll-behavior

Riferimento:Proprietà CSS scroll-margin

Riferimento:Proprietà CSS scroll-padding

Riferimento:Proprietà CSS scroll-snap-align