CSS overscroll-behavior Property

What You’ll Learn

The overscroll-behavior property controls what happens when a scrollable element reaches its edge. It is essential for modals, sidebars, chat panels, and any nested scroll area where you want to stop scroll chaining.

Introduction

The overscroll-behavior property in CSS is used to control the behavior of scroll overflow on a webpage. It defines how the browser handles scrolling when the content reaches the end of a scrollable area.

This property is particularly useful for preventing scroll chaining, where a scroll action in one area can inadvertently scroll other areas.

Definition and Usage

Use overscroll-behavior on elements that scroll independently inside a larger page, such as modal bodies, off-canvas sidebars, dropdown panels, and nested feed lists.

Pair it with overflow: auto or overflow-y: auto so the element actually scrolls. Then set overscroll-behavior: contain to keep edge scrolling inside that box.

📝 Syntax

The syntax for the overscroll-behavior property is as follows:

element {
  overscroll-behavior: value;
}

It can be applied to any scrollable element. Here, value can be one of the predefined keywords described below.

Basic Example

.scroll-container {
  height: 150px;
  overflow: auto;
  overscroll-behavior: contain;
}

Syntax Rules

• Accepted values: auto, contain, and none.
• The element must be scrollable, usually with overflow: auto or overflow: scroll.
• overscroll-behavior is a shorthand for overscroll-behavior-x and overscroll-behavior-y.
• contain is the most common choice for modals, drawers, and nested panels.

🎯 Default Value

The default value of the overscroll-behavior property is auto, which means the default browser behavior for overscroll will occur.

With auto, scrolling past the edge of a nested scroll area may chain to the page behind it or trigger platform-specific bounce effects.

💎 Property Values

Examples Gallery

Prevent scroll chaining with contain, compare default auto behavior, disable bounce with none, and isolate scroll inside a sidebar panel.

<style>
  .scroll-container {
    width: 300px;
    height: 150px;
    overflow: auto;
    border: 1px solid #ccc;
    overscroll-behavior: contain;
  }
  .content {
    height: 300px;
    background: linear-gradient(to bottom, #f06, #f9a);
  }
</style>

<div class="scroll-container">
  <div class="content"></div>
</div>

.panel {
  max-height: 160px;
  overflow: auto;
  overscroll-behavior: auto;
  border: 1px solid #cbd5e1;
  border-radius: 0.5rem;
  padding: 1rem;
}

.feed {
  height: 180px;
  overflow: auto;
  overscroll-behavior: none;
  border: 1px solid #334155;
  border-radius: 0.75rem;
}

.sidebar-body {
  flex: 1;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 1rem;
}

overflow vs overscroll-behavior

The overflow properties decide whether content scrolls or gets clipped inside a box. overscroll-behavior decides what happens after that box reaches its scroll boundary.

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

♿ Accessibility

• Do not trap users — Preventing scroll chaining is helpful in overlays, but ensure keyboard users can still exit modals and reach main content.
• Keep nested scroll areas usable — Pair overscroll control with clear scrollable regions and sufficient contrast.
• Prefer contain in dialogs — so background page movement does not disorient screen reader users.
• Test touch devices — Overscroll behavior is especially noticeable on mobile swipe gestures.

💡 Best Practices