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



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.


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;


autoAllows the browser to use its default overscroll behavior. This is the initial value.
containConfines the overscroll to the boundary of the element, preventing it from propagating to the parent or ancestor elements.
noneDisallows overscrolling in the inline content.

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

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera