overscroll-behavior
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