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 |
Usage Examples
<!-- 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>Tips & Notes
Preventing browser back navigation
Use obxc to prevent the browser's back/forward gesture from triggering at the end of horizontal scroll.