CSS overscroll-behavior-inline Property

Definition and Usage

The overscroll-behavior-inline property sets what the browser does when scrolling hits the inline-axis edge of a scroll container. In horizontal writing modes such as English, the inline axis is horizontal: left and right edges.

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 or overflow: auto. For both axes at once, use overscroll-behavior.

CSS Syntax

Property Values

How to Use overscroll-behavior-inline

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 (in horizontal writing).
3. Set overscroll-behavior-inline 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-inline 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-inline: 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-inline: 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-inline: 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