demo · v144
Keyboard Overscroll
Click into one of the panels, press the down arrow or PageDown. The left panel has overscroll-behavior:contain — keystroke scroll stops at the edge in Chrome 144 (previously it bubbled to the body). The right panel chains as before.
Left panel · overscroll-behavior: contain
Focus me, scroll to the bottom with arrows or PgDn. Chrome 144 stops chaining keyboard scrolls past the boundary.
Pre-144, the parent (the stage) would absorb the leftover scroll even with contain set. That broke modal dialogs and side sheets that the user navigated by keyboard.
Long content padding so there is room to scroll. Long content padding so there is room to scroll. Long content padding so there is room to scroll.
Long content padding so there is room to scroll. Long content padding so there is room to scroll. Long content padding so there is room to scroll.
End of left panel.
Right panel · default (auto chaining)
Same content. No overscroll-behavior set — keystroke scroll chains to the body once it hits the end.
This is the baseline to compare against. Watch the body-scroll counter next to it; left panel won't tick it up, right panel will.
Long content padding so there is room to scroll. Long content padding so there is room to scroll. Long content padding so there is room to scroll.
Long content padding so there is room to scroll. Long content padding so there is room to scroll. Long content padding so there is room to scroll.
End of right panel.
the CSS
.modal { overscroll-behavior: contain; }
/* Chrome 144 makes keyboard scrolling honour this rule.
Pre-144, only wheel and touch were contained. */