CSS overscroll-behavior-inline Property

What You’ll Learn

The overscroll-behavior-inline property controls what happens when a scrollable element reaches its inline-axis edge. In horizontal writing mode, that means left-right scrolling — essential for carousels, tab strips, wide tables, and horizontally scrollable panels.

Introduction

The overscroll-behavior-inline property in CSS is used to control the behavior when a user scrolls to the edge of an element’s content in the inline axis (typically left-right in horizontal writing modes).

This property is useful for managing the behavior when users scroll past the bounds of a scrollable area, such as preventing overscroll effects like bouncing or panning.

Definition and Usage

In horizontal writing modes such as English, the inline axis runs left to right, so overscroll-behavior-inline controls horizontal overscroll behavior. Use it on elements that scroll horizontally inside a larger page, such as carousels, tab strips, image galleries, and wide data table wrappers.

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

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

📝 Syntax

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

element {

  overscroll-behavior-inline: value;

}

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

Basic Example

.scroll-container {

  width: 300px;

  overflow-x: auto;

  overscroll-behavior-inline: contain;

}

Syntax Rules

• Accepted values: auto, contain, and none.
• The element must be scrollable on the inline axis, usually with overflow-x: auto or overflow: auto.
• overscroll-behavior is a shorthand for overscroll-behavior-block and overscroll-behavior-inline.
• In horizontal writing mode, the inline axis maps to horizontal scrolling (left and right edges).
• contain is the most common choice for carousels, tab strips, and wide table wrappers.

🎯 Default Value

The default value of the overscroll-behavior-inline property is auto.

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

💎 Property Values

Examples Gallery

Contain horizontal scroll chaining with contain, compare default auto behavior, disable inline-axis bounce with none on a carousel strip, and isolate scroll inside a wide data table wrapper.

<style>

  .scroll-container {

    width: 300px;

    overflow-x: auto;

    border: 1px solid #ccc;

    overscroll-behavior-inline: contain;

  }

  .content {

    width: 600px;

    background-color: lightblue;

  }

</style>



<div class="scroll-container">

  <div class="content">

    This is a horizontally scrollable container. Scroll to see the overscroll behavior in action.

  </div>

</div>

.panel {

  width: 300px;

  overflow-x: auto;

  overscroll-behavior-inline: auto;

  border: 1px solid #cbd5e1;

  border-radius: 0.5rem;

}

.carousel {

  width: 320px;

  overflow-x: auto;

  overscroll-behavior-inline: none;

  border: 1px solid #334155;

  border-radius: 0.75rem;

}

.table-wrapper {

  max-width: 360px;

  overflow-x: auto;

  overscroll-behavior-inline: contain;

  border: 1px solid #cbd5e1;

  border-radius: 0.5rem;

}

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;

}



/* Inline axis only — horizontal in horizontal writing */

.carousel {

  overscroll-behavior-block: auto;

  overscroll-behavior-inline: contain;

}

♿ Accessibility

• Do not trap users — Preventing inline-axis scroll chaining is helpful in carousels and tables, but ensure keyboard users can still navigate horizontally with arrow keys or focus management.
• Keep scrollable regions discoverable — Pair overscroll control with visible scroll cues and sufficient contrast on horizontally scrollable content.
• Prefer contain on data tables — so background page movement does not disorient screen reader users when scrolling wide tables.
• Test touch devices — Inline-axis overscroll behavior is especially noticeable on horizontal swipe gestures in carousels and tab strips.

💡 Best Practices