Updated: 2026-07-11
βοΈ Scroll Behavior Settings
Control scroll boundary behavior to prevent scroll chaining and pull-to-refresh.
ποΈ Live Preview
Scroll down inside the box to the boundary and feel the overscroll behavior difference.
contain
π Try scrolling down
When content reaches the bottom, overscroll-behavior: contain prevents further scrolling to the page.
π‘ overscroll-behavior controls scroll chaining β stopping internal scroll from triggering page scroll.
πΉ auto β default, allows scroll propagation
πΉ contain β prevents chaining, keeps rubber-banding
πΉ none β completely prevents overscroll effects
β¬οΈ Scroll to the bottom to feel the difference.
β end β
π» CSS Code
π CSS overscroll-behavior Explained
The overscroll-behavior property controls what happens when a scroll container reaches its scroll boundary. It solves the "scroll chaining" problem where scrolling past the boundary of a child element triggers the parent page to scroll.
Common Use Cases
- Modal/sidebar scroll preventing background scroll
- Chat windows preventing pull-to-refresh
- Full-screen scroll pages preventing Chrome overscroll effects
- Embedded iframes and widgets