1. css
  2. /properties
  3. /overscroll-behavior-y

overscroll-behavior-y

Definition

The overscroll-behavior-y property is a CSS property that controls the behavior of the vertical scroll overflow when scrolling beyond the boundaries of a scroll container. This property allows web developers to control the scroll behavior in a more consistent and predictable way across different browsers and devices.

Examples

Allows the browser to handle the scroll overflow behavior:

overscroll-behavior-y: auto;

Prevents vertical scroll overflow while allowing horizontal scroll overflow:

overscroll-behavior-y: contain;

Disables scroll overflow behavior on the y-axis:

overscroll-behavior-y: none;

Sets the property to its default value, which is auto:

overscroll-behavior-y: initial;

Inherits the property value from its parent element:

overscroll-behavior-y: inherit;

Values

ValueDescription
autoAllows the browser to handle the scroll overflow behavior.
containPrevents vertical scroll overflow while allowing horizontal scroll overflow.
noneDisables scroll overflow behavior on the y-axis.
initialSets the property to its default value, which is auto.
inheritInherits the property value from its parent element.

Best Practices

  • Use overscroll-behavior-y: contain to prevent vertical scroll overflow while allowing horizontal scroll overflow, when you have a horizontally scrollable element with content that is taller than its container.
  • Use overscroll-behavior-y: none to disable scroll overflow behavior on the y-axis, when vertical scrolling is not needed or desired.
  • Avoid using overscroll-behavior-y: auto as the default value, as it can result in inconsistent scrolling behavior across different browsers.
  • Use overscroll-behavior-y: initial to reset the property to its default value, which is auto.
  • Use overscroll-behavior-y: inherit to inherit the property value from its parent element, if needed.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesNoYesYes