CSS overscroll-behavior-x Property

Definition and Usage

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

Use it on carousels, tab strips, and wide tables so sideways overscroll does not move a parent scroll area. Pair it with overflow-x: auto. For both axes at once, use overscroll-behavior. For the logical inline axis, use overscroll-behavior-inline.

CSS Syntax

Property Values

How to Use overscroll-behavior-x

Make a sideways scrollable box, then decide what happens when the user reaches its left or right edge.

1. Give the element a fixed width and make it scroll with overflow-x: auto or overflow: auto.
2. Put content wider than the box so a horizontal scrollbar appears.
3. Set overscroll-behavior-x on that same scroll container. It is not inherited.
4. Choose contain for most carousels and tab strips, or none when bounce must also stop.

Live Preview

Scroll the white strip left or right to an edge, then keep scrolling. Change the value and compare how the outer dashed area reacts.

CSS Examples

Each snippet adds only what overscroll-behavior-x needs: a sideways scroll box and a keyword. Use Try It Yourself for a live editor.

<style>
  .strip {
    width: 200px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    border: 1px solid #ccc;
    white-space: nowrap;
  }
</style>

<div class="strip">
  <span>One</span>
  <span>Two</span>
  <span>Three</span>
  <span>Four</span>
  <span>Five</span>
</div>

<style>
  .tabs {
    width: 220px;
    overflow-x: auto;
    overscroll-behavior-x: none;
    border: 1px solid #ccc;
    white-space: nowrap;
  }
</style>

<div class="tabs">
  <span>Home</span>
  <span>Docs</span>
  <span>Blog</span>
  <span>Shop</span>
  <span>Help</span>
</div>

<style>
  .carousel {
    width: 240px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    border: 1px solid #ccc;
  }
  .track {
    display: flex;
    width: max-content;
    gap: 8px;
  }
</style>

<div class="carousel">
  <div class="track">
    <span>Card 1</span>
    <span>Card 2</span>
    <span>Card 3</span>
    <span>Card 4</span>
  </div>
</div>

Key Takeaways