CSS overscroll-behavior-x attribute

Previous Page overscroll-behavior-inline
Next Page overscroll-behavior-y

Definition and Usage

overscroll-behavior-x The property is used to turn off the scroll chaining or overscroll feedback of the element 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 ChainingRefers to the fact that overscrolling on an element can cause the parent element's scrolling behavior. This is the default behavior.

OverscrollFeedback 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 chaining 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 chaining and overscroll feedback behavior. Default value.
contain	Allows overscroll feedback behavior but does not allow scroll chaining.
none	Does not allow overscroll feedback or scroll chaining 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 Production:	Not supported. See:Animation-related Properties.
Version:	CSS3
JavaScript Syntax:	object.style.overscrollBehaviorX="none"