How Does CSS overscroll-behavior Stop Scroll Chaining?

The CSS overscroll-behavior property gives developers precise control over what happens when a user scrolls past the boundary of a scrollable element. By default, browsers pass unhandled scroll delta up to parent containers—a phenomenon known as scroll chaining—which frequently causes entire web pages to shift when a user reaches the bottom of a modal or sidebar. Applying overscroll-behavior severs this connection at the container level, isolating scrolling actions without requiring complex JavaScript event listeners or disruptive layout hacks.

Understanding the Scroll Chaining Problem

When an embedded container—such as a dropdown menu, modal overlay, or side drawer—reaches its maximum scroll position, modern browsers automatically transfer any continuing scroll gesture to the nearest scrollable ancestor, usually the <body> or <html> element.

This behavior creates significant user experience issues:

Disorientation: A user attempting to read content inside a popup suddenly finds the background page moving underneath.
Accidental Navigation: On mobile devices, overscrolling often triggers native browser actions such as pull-to-refresh or swipe-to-navigate.
Loss of Reading Position: When the background scrolls unexpectedly, users lose their place on the main page after closing the overlay.

Historically, solving this required JavaScript listeners on wheel or touchmove events using e.preventDefault(), or toggling overflow: hidden on the body element. Both techniques introduce performance overhead, break momentum scrolling on mobile devices, and risk layout shifting.

How overscroll-behavior Solves It

The overscroll-behavior property allows you to define the boundary behavior directly in CSS. It tells the browser engine to consume the scroll momentum entirely within the targeted element rather than letting it bubble up the DOM tree.

.modal-content {
  overflow-y: auto;
  overscroll-behavior: contain;
}

When applied, the element retains its native smooth scrolling and bounce effects, but once the boundary is reached, scrolling simply stops. The underlying page remains fixed.

Available Values and Syntax

The property accepts three primary values:

auto (Default): Standard browser behavior. Scroll chaining occurs freely to parent containers, and standard overscroll affordances (such as rubber-banding or pull-to-refresh) remain active.
contain: Prevents scroll chaining. The scroll gesture does not propagate to parent elements. However, local overscroll effects native to the platform (such as glow effects or boundary bouncing) are preserved inside the element.
none: Prevents scroll chaining and simultaneously disables native overscroll affordances like rubber-banding, glow indicators, and pull-to-refresh triggers.

Directional Control

You can isolate scroll containment along specific axes using sub-properties:

overscroll-behavior-x: Controls horizontal scroll propagation.
overscroll-behavior-y: Controls vertical scroll propagation.
overscroll-behavior: Shorthand for setting both axes simultaneously (e.g., overscroll-behavior: contain none; for horizontal and vertical respectively).

Common Practical Use Cases

Applying contain to a modal container ensures that users can scroll through long terms of service or multi-step forms without moving the page beneath:

.dialog-body {
  max-height: 80vh;
  overflow-y: auto;
  overscroll-behavior-y: contain;
}

Sidebars often fill the vertical screen height and contain nested navigation links. Preventing scroll bubbling preserves the main interface state while navigating the drawer:

.side-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 320px;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior-y: contain;
}

3. Disabling Pull-to-Refresh on Custom Web Apps

Single-page applications (SPAs) and Progressive Web Apps (PWAs) with custom refresh mechanisms or fixed interfaces benefit from disabling the browser's default pull-to-refresh gesture:

html, body {
  overscroll-behavior-y: none;
}

Browser Compatibility and Performance

The overscroll-behavior property is supported across all modern web browsers, including Chrome, Edge, Firefox, and Safari on both desktop and mobile platforms. Because it is handled directly by the browser's compositing thread rather than through JavaScript event loops, it prevents scroll chaining with zero impact on frame rates or input latency.