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

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