CSS overscroll-behavior property

Definition and Usage

overscroll-behavior The attribute is used to disable the scroll chaining (scroll chaining) or over-scroll feedback (overscroll affordance) of an element when trying to scroll beyond the scroll boundaries.

Scroll Chain: When over-scrolling on an element, it can cause the parent element's scroll behavior. This is the default behavior.

Over-scroll Feedback: The feedback provided to the user when trying to scroll beyond the scroll boundaries. For example, when trying to scroll beyond the top of a page on a mobile device, a visual feedback is usually displayed and the page is refreshed.

overscroll-behavior The property is a shorthand for the following properties:

overscroll-behavior The value of the property can be set in different ways:

If the overscroll-behavior property has two values:

overscroll-behavior: none contain;
  • x direction: no over-scroll behavior
  • y direction: no scroll chain, but allows over-scroll feedback

If the overscroll-behavior property has one value:

overscroll-behavior: contain;
  • x and y directions: no scroll chain, but allows over-scroll feedback

Instance

Example 1

Close the scroll chain of the scrollable <div> element:

#yellowDiv {
  overscroll-behavior: contain;
}

Try It Yourself

Example 2: Dual-value syntax:

Sets overscroll-behavior The property value is set to auto none, allows scroll chain and over-scroll feedback in the x-direction, but not in the y-direction:

#pinkDiv {
  overscroll-behavior: auto none;
}

Try It Yourself

CSS Syntax

overscroll-behavior: 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.overscrollBehavior="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 treated as 'contain', which is incorrect.

Related Pages

Reference:CSS overscroll-behavior-x property

Reference:CSS overscroll-behavior-y property

Reference:CSS scroll-behavior property

Reference:CSS scroll-margin property

Reference:CSS scroll-padding property

Reference:CSS scroll-snap-align property