overscroll-behavior-inline

Definition

The overscroll-behavior-inline CSS property controls the overscroll behavior of an element's inline-level content when the content is scrolled beyond the bounds of the element. It specifies whether the browser should allow or disallow overscrolling (also known as "rubber-banding") in the horizontal or vertical direction.

Examples

Allow overscrolling in the inline content:

.example {
  overscroll-behavior-inline: auto;
}

Confine overscrolling to the element's boundary:

.example {
  overscroll-behavior-inline: contain;
}

Disable overscrolling in the inline content:

.example {
  overscroll-behavior-inline: none;
}

Values

Best Practices

• Use overscroll-behavior-inline: contain on elements that contain scrollable inline content that should not propagate overscroll to the parent element or ancestor elements.
• Use overscroll-behavior-inline: none on elements that should not allow overscroll in their inline content.
• Avoid relying solely on overscroll-behavior-inline to control the scrolling behavior of an element, as it only affects overscrolling and not regular scrolling. Consider using overflow-x or overflow-y to control regular scrolling behavior.
• Be mindful of the browser compatibility of this property and test thoroughly on different browsers to ensure consistent behavior.

Browser Compatibility