Scroll a fixed-height chat log on a phone and, when the log ends, the page behind it keeps gliding. That handoff is the default chain between nested scrollers, and it reads to users as a broken page rather than a feature.
.chat-log { overflow-y: auto; overscroll-behavior-y: contain; }
dialog { overscroll-behavior: contain; }The three values
- auto is the default and owns the chain: an inner scroller that reaches its end passes the leftover motion to the page.
- contain ends the chain at that element, so the page stays still while the user gestures inside it, which is what a dialog or an infinite feed wants.
- none additionally disables overscroll effects such as pull-to-refresh, for the surfaces where those behaviors would fire mid-gesture and surprise nobody happily.
The body-lock dialog
The classic lock-the-body modal needed position fixed shims on some engines, because touch scroll ignores a bare overflow hidden in places. Adding overscroll-behavior: contain to the dialog handles the visible half of the bug in modern engines, and the dialog element itself already keeps the gesture from crossing the top layer.
Narrow scope, and that is the virtue: the property invents no behavior, it just refuses to hand your scroll to a stranger. gacor the way a good door latch is.