overscroll-behavior
Controls scroll chaining (scroll propagation to parent) when reaching the scroll boundary. obc is essential for preventing parent scroll propagation and pull-to-refresh in modals, sidebars, etc.
Class List
| Class | CSS | Description |
|---|---|---|
obau | overscroll-behavior: auto | default; propagates to parent at scroll boundary |
obc | overscroll-behavior: contain | blocks scroll propagation; essential for modals/sidebars |
obn | overscroll-behavior: none | blocks both propagation and bounce effects |
obxa | overscroll-behavior-x: auto | horizontal overscroll default |
obxc | overscroll-behavior-x: contain | blocks horizontal scroll propagation |
obxn | overscroll-behavior-x: none | blocks horizontal propagation + bounce |
obya | overscroll-behavior-y: auto | vertical overscroll default |
obyc | overscroll-behavior-y: contain | blocks vertical scroll propagation |
obyn | overscroll-behavior-y: none | blocks vertical propagation + bounce |
Class Details
obauoverscroll-behavior: auto
Browser default. Scroll propagates to the parent element when reaching the scroll boundary. This default behavior is natural for regular pages.
<!-- Default behavior: scroll propagates to parent -->
<div class="obau oya h20rem">
<p>When scroll reaches the end, the parent page scrolls.</p>
</div>obcoverscroll-behavior: contain
Scroll does not propagate to the parent even when reaching the scroll boundary. Also prevents pull-to-refresh on mobile. Essential for independent scroll areas like modals, dropdowns, and sidebars.
<!-- Modal: block scroll propagation -->
<div class="modal pf t0 l0 w100p h100vh df jcc aic bg0-0-0-50">
<div class="obc oya maxh80vh w50rem bg0F0F17 br8px p2rem">
<h2>Modal Content</h2>
<p>Scrolling does not move the page behind.</p>
</div>
</div>
<!-- Sidebar: independent scroll area -->
<aside class="obc oya h100vh w25rem pf t0 l0 bg18181B p2rem">
<nav>Long menu list...</nav>
</aside>Most commonly used class
obc is the most frequently used overscroll-behavior class. Solves the issue of the background page scrolling when a modal is open.
obnoverscroll-behavior: none
Prevents scroll propagation like obc, and additionally blocks bounce effects (glow, rubber-banding) completely.
<!-- Completely block including bounce effect -->
<div class="obn oya h30rem bg0F0F17 br8px p2rem">
<p>Even iOS Safari's rubber-banding effect is prevented.</p>
</div>obxaobxcobxnoverscroll-behavior-x
Controls only horizontal overscroll behavior independently. Used to prevent left/right scroll propagation in carousels, tabs, etc. with horizontal scrolling.
<!-- 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 class="fs0 w28rem h20rem bg6366F1 br8px"></div>
</div>obyaobycobynoverscroll-behavior-y
Controls only vertical overscroll behavior independently. Used to selectively prevent vertical scroll propagation from a scrollable area to its parent.
<!-- Block only vertical scroll propagation -->
<div class="obyc oya h30rem bg0F0F17 br8px p2rem">
<p>Vertical scroll does not propagate to parent at the end.</p>
<p>Horizontal scroll maintains default behavior.</p>
</div>Common Patterns
| Situation | Recommended | Reason |
|---|---|---|
| Modal / dialog | obc oya | Prevent background page scroll |
| Sidebar navigation | obc oya | Menu scroll doesn't affect page |
| Dropdown menu | obc oya | Prevent page scroll at menu end |
| Horizontal carousel | obxc oxa | Prevent back navigation at edges |
| Fullscreen app | obn | Block pull-to-refresh and bounce |
Tips & Notes
obc vs obn
In most cases obc is sufficient. Use obn to also remove bounce effects, such as iOS Safari's rubber-banding.
Overflow required
For obc to work, the element must have scrolling enabled. Use it together with an overflow property like oa or oya.