overscroll-behavior-x

Definition

The overscroll-behavior-x property is a sub-property of the overscroll-behavior property in CSS, used to control the horizontal overscroll behavior of an element.

Examples

In this example, the scrollable-element will use the default overscroll behavior for the horizontal direction:

.scrollable-element {
  overscroll-behavior-x: auto;
}

In this example, the no-horizontal-scroll-element will have its horizontal overscroll behavior set to contain, which prevents horizontal scrolling past the edges of the element:

.no-horizontal-scroll-element {
  overscroll-behavior-x: contain;
}

In the third example, the no-scroll-element will have horizontal overscrolling behavior disabled:

.no-scroll-element {
  overscroll-behavior-x: none;
}

Values

Best practices

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

Browser Compatibility