CSS overscroll behavior: stop unwanted scroll chaining

How the rule works

A case detail drawer contains a long evidence list while the page behind it also scrolls. When a reader reaches the evidence list's end, moving the background page can lose context. Give the evidence region an actual scrolling box and use overscroll-behavior on that box. The property does not create scrolling by itself; overflow and a size constraint must already make the region scrollable. Keep the region reachable with a keyboard and allow the full evidence list to be read without pointer gestures. On mobile, containment can affect browser navigation gestures, so test the actual clients before applying it to the entire document. Use it on the smallest appropriate region, not as a blanket page rule.

.case-drawer__evidence {
  max-block-size: min(30rem, 60vh);
  overflow-y: auto;
  overscroll-behavior-y: contain;
  padding-inline-end: .5rem;
}

Cost and verification

The rule adds no network request and little layout work beyond the nested scroller itself. The UX cost is more serious: a user may expect a gesture at the edge to continue scrolling the page, and a nested scroll area can be hard to discover. Check wheel, touch, trackpad, keyboard, and screen reader navigation. If the drawer is modal, focus management and background scroll locking are application concerns beyond this CSS rule. Browser support should be verified for the intended audience, with normal scroll chaining as a usable fallback.

Common Mistakes

• Do not expect overscroll-behavior to create a scroll container.
• Do not disable document-level navigation gestures without a task reason.
• Do not treat nested scrolling as a replacement for focus management.

Connected lessons

• CSS Layout
• CSS overflow: contain long data without losing controls
• CSS scroll snap: align cards without trapping the reader
• CSS positioning: keep sticky controls inside their scroll boundary