overscroll-behavior-x
Controls horizontal overscroll behavior independently. Used to prevent left/right scroll propagation in horizontally scrollable elements like carousels and tabs.
Class List
| Class | CSS | Description |
|---|---|---|
obxa | overscroll-behavior-x: auto | default; propagates to parent at horizontal scroll boundary |
obxc | overscroll-behavior-x: contain | blocks horizontal scroll propagation |
obxn | overscroll-behavior-x: none | blocks both horizontal propagation and bounce effects |
Live Demo
In both examples the outer box and the inner box each scroll horizontally. Scroll the inner box to its right edge, then keep pushing. On the left the outer box starts moving (scroll chaining); on the right the movement stops inside.
Default (auto) — no class
Outer filler area — it only exists to make the outer box wide enough to scroll horizontally as well.
Outer filler area — it only exists to make the outer box wide enough to scroll horizontally as well.
Outer filler area — it only exists to make the outer box wide enough to scroll horizontally as well.
Outer filler area — it only exists to make the outer box wide enough to scroll horizontally as well.
When the inner scroll hits its edge, the leftover movement is handed to the outer scroll container.
Propagation blocked — obxc
Outer filler area — it only exists to make the outer box wide enough to scroll horizontally as well.
Outer filler area — it only exists to make the outer box wide enough to scroll horizontally as well.
Outer filler area — it only exists to make the outer box wide enough to scroll horizontally as well.
Outer filler area — it only exists to make the outer box wide enough to scroll horizontally as well.
The outer container stays put even when the inner scroll reaches its edge, so a carousel can no longer drag the page along.
Per-class Detail
obxaoverscroll-behavior-x: auto
The browser default. When horizontal scrolling reaches the edge, the remaining scroll amount is passed to the parent scroll container; with no parent, the browser's left/right swipe navigation or rubber-band effect kicks in.
When to use
Use it to reset an element back to default behavior when obxc or obxn was applied elsewhere. New elements do not need it.
<!-- Default: horizontal scroll chains to the parent scroller -->
<div class="obxa oxa df gap16px p16px">
<div class="fs0 w28rem h20rem bg6366F1 br8px"></div>
<div class="fs0 w28rem h20rem bg6366F1 br8px"></div>
</div>obxcoverscroll-behavior-x: contain
Stops the leftover scroll from reaching the parent when the horizontal edge is hit, while keeping the element's own rubber-band (bounce) effect.
When to use
The default choice for horizontal carousels, horizontal tab bars, and wide tables embedded in a page. It prevents the page from being dragged along, or the back gesture firing, when the user pushes to the edge.
<!-- Carousel that keeps horizontal scroll to itself -->
<div class="obxc oxa df gap16px p16px">
<div class="fs0 w28rem h20rem bg6366F1 br8px"></div>
<div class="fs0 w28rem h20rem bg6366F1 br8px"></div>
<div class="fs0 w28rem h20rem bg6366F1 br8px"></div>
</div>obxnoverscroll-behavior-x: none
On top of blocking propagation, it also removes the element's own bounce effect and the left/right swipe navigation.
When to use
Use it for immersive areas such as maps, canvases, or kiosk screens where no browser default gesture may interfere. It is overkill for an ordinary carousel.
<!-- Kiosk style viewer: no chaining and no rubber band -->
<div class="obxn oxa w100p h40rem bg0F0F17 br8px">
<div class="minw120rem h40rem"></div>
</div>Usage Examples
The basic form for blocking horizontal propagation in carousels and tab bars.
<!-- Horizontal carousel: prevent left/right scroll propagation -->
<div class="obxc oxa df gap16px p16px">
<div class="fs0 w28rem h20rem bg6366F1 br8px"></div>
<div class="fs0 w28rem h20rem bg6366F1 br8px"></div>
<div class="fs0 w28rem h20rem bg6366F1 br8px"></div>
</div>
<!-- Horizontal tab scroll: prevent back gesture -->
<nav class="obxc oxa df gap8px wsn">
<a class="fs0 py8px px16px bg18181B br4px cFFFFFF tdn">Tab 1</a>
<a class="fs0 py8px px16px bg18181B br4px cFFFFFF tdn">Tab 2</a>
<a class="fs0 py8px px16px bg18181B br4px cFFFFFF tdn">Tab 3</a>
</nav>A wrapper around a wide data table. Pushing the table to its edge no longer moves the page sideways or triggers back navigation.
<!-- Wide data table inside a page that also scrolls sideways -->
<div class="obxc oxa w100p b1pxsolid27272A br8px">
<table class="minw60rem bcc w100p fs14px">
<thead>
<tr>
<th class="tal py12px px16px bg18181B cA1A1AA wsn">Order</th>
<th class="tal py12px px16px bg18181B cA1A1AA wsn">Customer</th>
<th class="tal py12px px16px bg18181B cA1A1AA wsn">Shipping address</th>
<th class="tal py12px px16px bg18181B cA1A1AA wsn">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td class="py12px px16px bb1pxsolid27272A wsn">A-10231</td>
<td class="py12px px16px bb1pxsolid27272A wsn">Jane Doe</td>
<td class="py12px px16px bb1pxsolid27272A wsn">120 Long Street, Springfield</td>
<td class="py12px px16px bb1pxsolid27272A wsn">Shipped</td>
</tr>
</tbody>
</table>
</div>Tips & Notes
Preventing browser back navigation
Use obxc to prevent the browser's back/forward gesture from triggering at the end of horizontal scroll.
Only meaningful on a scrollable element
overscroll-behavior-x only applies when the element really is a horizontal scroll container. Without an overflow class such as oxa it has no effect at all.
contain versus none
obxc blocks propagation to the parent but keeps the element's own bounce. obxn removes the bounce as well. For most UI, contain is the right choice.
When the axis gets confusing
If you also want to block vertical scrolling inside a horizontal carousel, it is simpler to use obc, which handles both axes at once, instead of per-axis classes.