CSS overscroll-behavior Property

Definition and Usage

The overscroll-behavior property controls what happens when scrolling reaches the edge of a scroll container. It can stop scroll chaining to a parent and reduce bounce or pull-to-refresh style effects.

The initial value is auto. It is a shorthand for overscroll-behavior-x and overscroll-behavior-y. One keyword sets both axes; two keywords set x then y. The element must be a scroll container (usually via overflow).

CSS Syntax

Property Values

How to Use overscroll-behavior

Make a scroll container first, then decide what should happen at its edge.

1. Create a scrollable box with overflow: auto (or scroll) and a limited size.
2. Put taller (or wider) content inside so the box can scroll.
3. Set overscroll-behavior on that scroll container — often contain for modals and nested panels.
4. Use one keyword for both axes, or two keywords for x then y. Prefer axis longhands when only one axis matters.

Live Preview

Scroll the inner box to its edge, then keep scrolling. Change the keyword and compare whether the outer box moves.

CSS Examples

Each snippet focuses on overscroll-behavior. Nested sizes exist only so you can reach a scroll edge. Use Try It Yourself for a live editor.

<style>
  .panel {
    height: 120px;
    overflow: auto;
    overscroll-behavior: contain;
    border: 1px solid #cbd5e1;
    padding: 8px;
  }
</style>

<div class="panel">
  Scroll to the edge, then keep going.
  The page behind should stay put.
</div>

<style>
  .panel {
    height: 120px;
    overflow: auto;
    overscroll-behavior: none;
    border: 1px solid #cbd5e1;
    padding: 8px;
  }
</style>

<div class="panel">
  At the edge, neither the parent nor bounce effects should take over.
</div>

<style>
  .panel {
    height: 120px;
    overflow: auto;
    overscroll-behavior: auto;
    border: 1px solid #cbd5e1;
    padding: 8px;
  }
</style>

<div class="panel">
  Default behavior. After the edge, a parent may start scrolling.
</div>

Key Takeaways