CSS overscroll-behavior-block Property

What You’ll Learn

The overscroll-behavior-block property controls what happens when a scrollable element reaches its block-axis edge. In horizontal writing mode, that means vertical scrolling — essential for modals, drawers, chat panels, and nested scroll areas.

Introduction

The overscroll-behavior-block property in CSS controls the behavior of the browser when the user scrolls to the edge of a block-level element along the block axis.

It allows developers to define what happens when a user attempts to scroll beyond the boundaries of an element, providing a way to manage the default “bounce” or “scroll chaining” behavior seen in many browsers and devices.

This property is particularly useful for improving user experience in scrollable areas and preventing undesired scrolling interactions.

Definition and Usage

In horizontal writing modes such as English, the block axis runs top to bottom, so overscroll-behavior-block controls vertical overscroll behavior. Use it on elements that scroll independently inside a larger page, such as modal bodies, off-canvas drawers, dropdown panels, and nested feed lists.

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

The overscroll-behavior shorthand sets both block and inline axes at once. Use overscroll-behavior-inline when you need to control horizontal overscroll separately.

📝 Syntax

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

element {

  overscroll-behavior-block: value;

}

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

Basic Example

.scrollable {

  width: 300px;

  height: 150px;

  overflow: auto;

  overscroll-behavior-block: contain;

}

Syntax Rules

• Accepted values: auto, contain, and none.
• The element must be scrollable, usually with overflow: auto or overflow-y: auto.
• overscroll-behavior is a shorthand for overscroll-behavior-block and overscroll-behavior-inline.
• In horizontal writing mode, the block axis maps to vertical scrolling (top and bottom edges).
• contain is the most common choice for modal bodies, drawers, and nested panels.

🎯 Default Value

The default value of the overscroll-behavior-block property is auto, which allows the default overscroll behavior, such as scrolling or bounce effects, to occur on the block axis.

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

💎 Property Values

Examples Gallery

Contain vertical scroll chaining with contain, compare default auto behavior, disable block-axis bounce with none, and isolate scroll inside a modal or drawer body.

<style>

  .scrollable {

    width: 300px;

    height: 150px;

    overflow: auto;

    border: 1px solid #ccc;

    overscroll-behavior-block: contain;

  }

</style>



<div class="scrollable">

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>

  <p>Fusce condimentum nunc ac nisi vulputate fringilla...</p>

</div>

.panel {

  max-height: 160px;

  overflow: auto;

  overscroll-behavior-block: auto;

  border: 1px solid #cbd5e1;

  border-radius: 0.5rem;

  padding: 1rem;

}

.feed {

  height: 180px;

  overflow: auto;

  overscroll-behavior-block: none;

  border: 1px solid #334155;

  border-radius: 0.75rem;

}

.drawer-body {

  flex: 1;

  overflow: auto;

  overscroll-behavior-block: contain;

  padding: 1rem;

}

overscroll-behavior vs block vs inline

The overscroll-behavior shorthand sets both axes at once. overscroll-behavior-block targets only the block axis (vertical in horizontal writing), and overscroll-behavior-inline targets only the inline axis (horizontal in horizontal writing).

/* Shorthand — both axes */

.modal-body {

  overscroll-behavior: contain;

}



/* Block axis only — vertical in horizontal writing */

.drawer-body {

  overscroll-behavior-block: contain;

  overscroll-behavior-inline: auto;

}

♿ Accessibility

• Do not trap users — Preventing block-axis 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 — Block-axis overscroll behavior is especially noticeable on mobile swipe gestures and pull-to-refresh.

💡 Best Practices