CSS overscroll-behavior-inline Property

Description

The overscroll-behavior-inline CSS property is used to control the behavior of scrollable inline (horizontal) axes when content exceeds the container's dimensions. It allows developers to specify whether the browser should allow or prevent the browser's default overscroll behavior, such as the bounce effect on touch devices or the continued scrolling beyond the content boundaries. By setting this property to values like "auto," "contain," or "none," web designers can tailor the user experience to enhance or restrict the overscroll behavior within inline-scrolling containers, providing more control over the visual and interactive aspects of their web applications.

Initial value
auto
Applies to
non-replaced block-level elements and non-replaced inline-block elements
Inherited
no
Computed value
as specified
Animatable
discrete
JavaScript syntax
object.style.overscrolBehaviorInline

Syntax

overscroll-behavior-inline: auto | contain | none

Values

  • autoThe default scroll overflow behavior occurs as normal.
  • containDefault scroll overflow behavior is observed inside the element this value is set on (e.g. "bounce" effects or refreshes), but no scroll chaining occurs to neighboring scrolling areas, e.g. underlying elements will not scroll.
  • noneNo scroll chaining occurs to neighboring scrolling areas, and default scroll overflow behavior is prevented.

Example

<main>
<div>
<div>
<p>
<code>overscroll-behavior-inline</code> has been used to make it so that
when the scroll boundaries of the yellow inner box are reached, the
whole page does not begin to scroll.
</p>
</div>
</div>
</main>
main {
  height: 400px;
  width: 3000px;
  background-color: white;
  background-image: repeating-linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 19px,
    rgba(0, 0, 0, 0.5) 20px
  );
}

main > div {
  height: 300px;
  width: 400px;
  overflow: auto;
  position: relative;
  top: 50px;
  left: 50px;
  overscroll-behavior-inline: contain;
}

div > div {
  height: 100%;
  width: 1500px;
  background-color: yellow;
  background-image: repeating-linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 19px,
    rgba(0, 0, 0, 0.5) 20px
  );
}

p {
  padding: 10px;
  background-color: rgba(255, 0, 0, 0.5);
  margin: 0;
  width: 360px;
  position: relative;
  top: 10px;
  left: 10px;
}

Browser Support

The following table will show you the current browser support for the CSS overscroll-behavior-inline property.

Desktop
Edge Chrome Firefox Opera Safari
7977736416
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
777955161277

Last updated by CSSPortal on: 31st December 2023