CSS overscroll-behavior-block Property

Definition and Usage

The overscroll-behavior-block property sets what the browser does when scrolling hits the block-axis edge of a scroll container. In horizontal writing modes such as English, the block axis is vertical: top and bottom edges.

Use it on nested panels, modal bodies, and drawers so vertical overscroll does not move the page behind them. Pair it with overflow: auto or overflow-y: auto. For both axes at once, use overscroll-behavior.

CSS Syntax

Property Values

How to Use overscroll-behavior-block

Make a scrollable box, then decide what happens when the user reaches its block-axis edge.

1. Give the element a fixed size and make it scroll with overflow: auto or overflow-y: auto.
2. Put content taller than the box so a vertical scrollbar appears (in horizontal writing).
3. Set overscroll-behavior-block on that same scroll container. It is not inherited.
4. Choose contain for most modals and drawers, or none when bounce must also stop.

Live Preview

Scroll the yellow panel to its top or bottom, then keep scrolling. Change the value and compare how the outer dashed area reacts.

CSS Examples

Each snippet adds only what overscroll-behavior-block needs: a scrollable box and a keyword. Use Try It Yourself for a live editor.

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

<div class="panel">
  <p>Line 1 — scroll inside this box.</p>
  <p>Line 2 — keep going to the edge.</p>
  <p>Line 3 — extra scroll stays here.</p>
  <p>Line 4 — the page behind does not move.</p>
</div>

<style>
  .feed {
    height: 140px;
    overflow: auto;
    overscroll-behavior-block: none;
    border: 1px solid #ccc;
  }
</style>

<div class="feed">
  <p>Update 1</p>
  <p>Update 2</p>
  <p>Update 3</p>
  <p>Update 4</p>
  <p>Update 5</p>
</div>

<style>
  .drawer-body {
    height: 140px;
    overflow: auto;
    overscroll-behavior-block: contain;
  }
</style>

<aside class="drawer">
  <h2>Settings</h2>
  <div class="drawer-body">
    <p>Profile</p>
    <p>Notifications</p>
    <p>Privacy</p>
    <p>Security</p>
    <p>Billing</p>
  </div>
</aside>

Key Takeaways