CSS overscroll-behavior-inline Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

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

HTML

<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>

CSS

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;
}

Result

Editor