CSS overscroll-behavior-y Property

Definition and Usage

The overscroll-behavior-y property sets what the browser does when scrolling hits the physical vertical edge of a scroll container — top and bottom. Unlike the logical longhands, it does not flip with writing-mode.

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

CSS Syntax

Property Values

How to Use overscroll-behavior-y

Make a vertically scrollable box, then decide what happens when the user reaches its top or bottom edge.

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

Live Preview

Scroll the white 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-y needs: a vertical scroll box and a keyword. Use Try It Yourself for a live editor.

<style>
  .panel {
    height: 120px;
    overflow-y: auto;
    overscroll-behavior-y: 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-y: auto;
    overscroll-behavior-y: 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>
  .messages {
    height: 140px;
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }
</style>

<div class="chat">
  <h2>Chat</h2>
  <div class="messages">
    <p>Hello!</p>
    <p>How are you?</p>
    <p>Working on CSS.</p>
    <p>Nice — keep going.</p>
    <p>Done for today.</p>
  </div>
</div>

Key Takeaways