overscroll-behavior-y
Controls vertical overscroll behavior independently. Used to selectively prevent vertical scroll propagation from a scrollable area to its parent.
Class List
| Class | CSS | Description |
|---|---|---|
obya | overscroll-behavior-y: auto | default; propagates to parent at vertical scroll boundary |
obyc | overscroll-behavior-y: contain | blocks vertical scroll propagation |
obyn | overscroll-behavior-y: none | blocks both vertical propagation and bounce effects |
Usage Examples
<!-- Modal: 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>
<!-- Prevent pull-to-refresh -->
<body class="obyc">
<main class="oya h100vh">
Pull-to-refresh does not work on mobile.
</main>
</body>
<!-- Chat area: independent scroll -->
<div class="chat-messages obyc oya h50rem bg18181B p16px">
<div>Message 1</div>
<div>Message 2</div>
<div>Message 3</div>
</div>Tips & Notes
Preventing mobile pull-to-refresh
Apply obyc to the top-level page element to block the mobile browser's pull-to-refresh behavior.