CSS overscroll-behavior-inline Manage Scrolling

overscroll-behavior-inline

The overscroll-behavior-inline CSS property controls how a browser behaves when it reaches the inline direction boundary of a scrolling area. This property helps manage scrolling behavior effectively, preventing unwanted effects like chaining to neighboring scrolling areas, and improves user experience by providing smoother and more controlled scrolling interactions.

Syntax

/* Keyword values */
overscroll-behavior-inline: auto; /* default */
overscroll-behavior-inline: contain;
overscroll-behavior-inline: none;

/* Global values */
overscroll-behavior-inline: inherit;
overscroll-behavior-inline: initial;
overscroll-behavior-inline: revert;
overscroll-behavior-inline: revert-layer;
overscroll-behavior-inline: unset;

Values

• auto: This is the default value, allowing the normal scroll overflow behavior.
• contain: This value ensures that the default scroll overflow behavior is observed within the element, but prevents scroll chaining to neighboring scrollable areas. It also disables native browser navigation features like vertical pull-to-refresh and horizontal swipe navigation.
• none: This value prevents both the default scroll overflow behavior and scroll chaining to neighboring scrolling areas.

Formal Definition

Formal Syntax

overscroll-behavior-inline = contain | none | auto

Examples

Preventing Inline Overscrolling

In this example, we will demonstrate how to prevent inline overscrolling using the overscroll-behavior-inline property. We have two block-level boxes, one inside the other. The outer box has a large width, causing the page to scroll horizontally. The inner box has a smaller width but contains content that is wider than the inner box itself, requiring horizontal scrolling within the inner box.

By default, when the inner box is scrolled and a scroll boundary is reached, the whole page will begin to scroll. To prevent this, we set overscroll-behavior-inline: contain on the inner box.

HTML

<main>
  <div>
    <div>
      <p>
        <code>overscroll-behavior-inline</code> has been used to ensure 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,
    rgb(0 0 0 / 0%) 0px,
    rgb(0 0 0 / 0%) 19px,
    rgb(0 0 0 / 50%) 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,
    rgb(0 0 0 / 0%) 0px,
    rgb(0 0 0 / 0%) 19px,
    rgb(0 0 0 / 50%) 20px
  );
}

p {
  padding: 10px;
  background-color: rgb(255 0 0 / 50%);
  margin: 0;
  width: 360px;
  position: relative;
  top: 10px;
  left: 10px;
}

Result

In this example, the overscroll-behavior-inline: contain property ensures that when the inner box reaches its scroll boundaries, the whole page does not begin to scroll. This creates a more controlled and user-friendly scrolling experience.

Controlling Scroll Behavior

Let’s consider another example where we want to completely disable the default overscroll behavior and prevent scroll chaining to neighboring scrollable areas. This can be useful in scenarios where you want to ensure that scrolling within a specific element does not affect the rest of the page.

HTML

<div class="outer-box">
  <div class="inner-box">
    <p>
      This is an example of using <code>overscroll-behavior-inline: none</code> to
      completely disable the default overscroll behavior and prevent scroll chaining.
    </p>
  </div>
</div>

CSS

.outer-box {
  height: 300px;
  width: 3000px;
  background-color: lightblue;
  overflow: auto;
}

.inner-box {
  height: 300px;
  width: 400px;
  overflow: auto;
  position: relative;
  top: 50px;
  left: 50px;
  overscroll-behavior-inline: none;
}

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

Result

In this example, the overscroll-behavior-inline: none property ensures that no default overscroll behavior occurs, and scroll chaining to neighboring scrollable areas is prevented. This creates a more controlled scrolling experience within the inner box.

Specifications

The overscroll-behavior-inline property is part of the CSS Overscroll Behavior Module Level 1. This module standardizes how overscrolling is managed in web applications.

Key Points

• Module: CSS Overscroll Behavior Module Level 1
• Purpose: Controls overscrolling behavior in the inline direction.
• Use Cases: Prevents scroll chaining, manages overflow behavior, and ensures smooth user interactions.

Browser Compatibility

The overscroll-behavior-inline property is supported by most modern browsers:

• Chrome: Version 77.0 and above.
• Edge: Version 79.0 and above.
• Firefox: Version 73.0 and above.
• Opera: Version 64.0 and above.

This widespread support makes overscroll-behavior-inline a reliable tool for managing overscrolling behavior across different platforms. Using this property ensures that your web designs provide a consistent and polished user experience.