Scrolling that stops at the edge
Scroll to the bottom of this panel, then keep going.
The page behind it does not take over.
That handoff is called scroll chaining, and contain switches it off.
It is one line, and it replaces every body-lock hack.
You have reached the end. The page stayed where it was.
CaveatThis is the real fix for the page scrolling behind an open modal. Locking body with overflow: hidden throws away the reading position and jumps the layout by the scrollbar width.
FallbackReach the end of this panel and keep scrolling: the page underneath stays put. Unsupported engines chain as before, which is the old behaviour rather than a broken one.
.panel {
overflow: auto;
/* the scroll stops here */
overscroll-behavior: contain;
}Published
Questions
How do I stop the page scrolling behind an open modal?
overscroll-behavior: contain on the panel — scrolling stops at its own edge instead of chaining to the page underneath. Locking body with overflow: hidden does the same job by throwing away the reading position and jumping the layout by the scrollbar width.
Why does overscroll-behavior seem to do nothing?
It only applies to an element that is actually a scroll container. A panel whose content fits, or one with no overflow of its own, has no scroll to contain, so the rule sits there doing nothing while the page keeps chaining.
contain or none?
contain stops the chain to the parent and keeps the browser's own overscroll effect on this element. none also kills that effect — the rubber band, and the pull-to-refresh gesture with it, which is a bigger decision than it looks.