CSS overscroll-behavior-y Property

Description

The overscroll-behavior-y CSS property controls the behavior of a web page's vertical scrolling when the content reaches its boundaries. It is particularly useful for touch and trackpad interactions. By setting this property, you can define whether or not the page should continue to scroll when a user tries to scroll beyond the top or bottom edges of the content. The property can take values like "auto," "contain," or "none." "Auto" allows the default browser behavior to take place, "contain" prevents the page from scrolling further when the content boundary is reached, and "none" disables any special behavior, allowing the user to freely overscroll. This property helps improve the overall user experience and can be customized to suit specific design requirements.

Initial value
auto
Applies to
non-replaced block-level elements and non-replaced inline-block elements
Inherited
no
Computed value
as specified
Animatable
discrete
JavaScript syntax
object.style.overscrollBehaviorY

Syntax

overscroll-behavior-y: auto | contain | none

Values

  • autoThe default scroll overflow behavior occurs as normal.
  • containDefault scroll overflow behavior is observed inside the element this value is set on (e.g. "bounce" effects or refreshes), but no scroll chaining occurs to neighboring scrolling areas, e.g. underlying elements will not scroll.
  • noneNo scroll chaining occurs to neighboring scrolling areas, and default scroll overflow behavior is prevented.

Example

.messages {
  height: 220px;
  overflow: auto;
  overscroll-behavior-y: contain;
}

Browser Support

The following table will show you the current browser support for the CSS overscroll-behavior-y property.

Desktop
Edge Chrome Firefox Opera Safari
1863595016
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
63594616863

Last updated by CSSPortal on: 31st December 2023