CSS overscroll-behavior-x Property

What You’ll Learn

The overscroll-behavior-x property controls what happens when a scrollable element reaches its horizontal edge. It is essential for carousels, tab strips, wide tables, and any panel that scrolls left and right inside a larger page.

Introduction

The overscroll-behavior-x property in CSS controls the browser’s behavior when the horizontal boundary of a scrolling area is reached.

This property is particularly useful for managing how users interact with elements that have overflow content, such as scrollable containers.

By customizing the overscroll behavior, developers can enhance the user experience by preventing unexpected scrolling actions, such as scrolling the entire page when reaching the end of a scrollable element.

Definition and Usage

Use overscroll-behavior-x 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 horizontal axis. Then set overscroll-behavior-x: contain to keep horizontal edge scrolling inside that box.

The overscroll-behavior shorthand sets both physical axes at once. In horizontal writing modes, overscroll-behavior-inline is the logical equivalent of the horizontal axis. Use overscroll-behavior-y when you need to control vertical overscroll separately.

📝 Syntax

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

element {
  overscroll-behavior-x: value;
}

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

Basic Example

.scrollable-container {
  width: 300px;
  height: 200px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

Syntax Rules

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

🎯 Default Value

The default value of the overscroll-behavior-x property is auto. This means the default overscroll behavior is applied, allowing the browser to determine how to handle the overscroll interaction.

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

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

<style>
  .scrollable-container {
    width: 300px;
    height: 200px;
    overflow-x: auto;
    border: 1px solid #ccc;
    overscroll-behavior-x: contain;
  }
  .inner {
    width: 600px;
  }
</style>

<div class="scrollable-container">
  <div class="inner">
    This is a scrollable container with horizontal overflow. The overscroll behavior has been set to "contain," so when you reach the end of the scrollable content, the scrolling does not propagate to the parent container.
  </div>
</div>

.panel {
  width: 300px;
  overflow-x: auto;
  overscroll-behavior-x: auto;
  border: 1px solid #cbd5e1;
  border-radius: 0.5rem;
}

.carousel {
  width: 320px;
  overflow-x: auto;
  overscroll-behavior-x: none;
  border: 1px solid #334155;
  border-radius: 0.75rem;
}

.table-wrapper {
  max-width: 360px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid #cbd5e1;
  border-radius: 0.5rem;
}

overscroll-behavior vs inline vs y

The overscroll-behavior shorthand sets both physical axes at once. overscroll-behavior-x targets only the horizontal axis (left and right), and overscroll-behavior-y targets only the vertical axis (top and bottom). In horizontal writing modes, overscroll-behavior-inline is the logical equivalent of the horizontal axis.

/* Shorthand — both physical axes */
.modal-body {
  overscroll-behavior: contain;
}

/* Horizontal axis only */
.carousel {
  overscroll-behavior-y: auto;
  overscroll-behavior-x: contain;
}

♿ Accessibility

• Do not trap users — Preventing horizontal 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 — Horizontal overscroll behavior is especially noticeable on swipe gestures in carousels and tab strips.

💡 Best Practices