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
18	63	59	50	16

Tablets / Mobile
63	59	46	16	8	63

Last updated by CSSPortal on: 31st December 2023