patterncssModerate
overscroll-behavior to prevent scroll chaining
Viewed 0 times
overscroll-behaviorscroll chainingpull-to-refreshmodal scrollbounce
mobileiosandroid
Problem
When a user scrolls to the end of a modal or scrollable panel, the scroll continues to the page behind it (scroll chaining). On mobile, this also triggers pull-to-refresh unintentionally.
Solution
Use overscroll-behavior on the scrollable container:
/* Prevent scroll from propagating to parent when this element reaches its edge */
.modal-content {
overflow-y: auto;
overscroll-behavior-y: contain; /* stops chaining on vertical scroll */
}
/* Prevent pull-to-refresh on the whole page */
body {
overscroll-behavior-y: none;
}
/* Prevent diagonal scroll interference in a horizontal carousel */
.carousel {
overflow-x: auto;
overscroll-behavior-x: contain;
}Why
By default, browsers chain scroll events — when a scroll container reaches its boundary, the scroll is passed to the parent container. overscroll-behavior: contain tells the browser to stop at the boundary.
Gotchas
- overscroll-behavior: none also disables the bounce/rubber-band effect on iOS, which some users expect as visual feedback.
- Pull-to-refresh on Android Chrome is disabled when overscroll-behavior-y: none is set on body.
- The property must be set on the scrolling element itself, not its parent.
- overscroll-behavior is not supported in older Safari — use a touch event listener as fallback if needed.
Context
Modals, drawers, carousels, or any scrollable component inside a scrollable page.
Revisions (0)
No revisions yet.