demo · v144

Modal Keyboard Trap

Click into the modal, then hold Page Down until you reach the bottom. Before v144 the scroll would chain to the outer panel and the page would scroll behind the modal. Now overscroll-behavior:contain stops it for keyboard scrolls too.

overscroll-behavior applies to keyboard: Chrome 144+

Tab into the inner scroller (or click it), then press Page Down / Down arrow to its end. The outer dashed area should NOT scroll.

Modal content paragraph 1. Use Page Down or arrow keys.

Paragraph 2. The container has overscroll-behavior: contain.

Paragraph 3.

Paragraph 4. Keep going to the bottom.

Paragraph 5.

Paragraph 6.

Paragraph 7.

Paragraph 8. Almost there.

Paragraph 9.

Paragraph 10. End of modal.

Outer scroller — should stay put when modal hits its end via keyboard.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

the API

.modal { overscroll-behavior: contain; }
/* v144 — this now applies when the user presses Page Down,
   Space, arrow keys — not just touch and wheel. */

see also

scenario focus

Select a scenario to focus its rendered example and summary.