Q42: How does overscroll-behavior prevent scroll chaining in modals?
overscroll-behavior: contain prevents scroll chaining actions from propagating to parent containers. When a user reaches the boundary of a scroll region inside a modal, background page scrolling is contained, stopping unwanted parent window movement.
Containing Scroll Inside Modals
.modal-body {
overflow-y: auto;
overscroll-behavior: contain;
}💡 overscroll-behavior: contain traps scrolling inside modal borders when reaching boundary edges.
Key Takeaways
- Prevents scroll chaining (parent page scrolling when modal boundaries hit edge limits).
- Eliminates bounce effects on mobile touch screens.
Knowledge Check
What issue is fixed by applying overscroll-behavior: contain to scrollable modal bodies?