Prevent a page from scrolling while a dialog is open

Prevent a page from scrolling while a dialog is open

Chrome 144 introduces a fix for long-standing issues with modal dialogs. The update allows overscroll-behavior: contain to work on non-scrollable containers, eliminating the need for JavaScript hacks.

Why This Matters

Previously, developers relied on JavaScript to lock the body’s scroll position when a dialog opened, which was error-prone and inconsistent. Chrome 144’s change enables a pure CSS solution by making the dialog a scroll container and applying overscroll-behavior: contain, reducing complexity and failure risks in scroll management.

Key Insights

• “8-hour App Engine outage, 2012”: Not directly relevant, but highlights the cost of scroll-related bugs in complex systems.
• “Sagas over ACID for e-commerce”: Not directly relevant, but underscores the need for robust, distributed solutions in UI interactions.
• “Temporal used by Stripe, Coinbase”: Not directly relevant, but illustrates the industry’s shift toward reliable state management—similar to CSS-driven scroll control.

Working Example

body {
  overscroll-behavior: contain;
}

#dialog {
  overscroll-behavior: contain;
  overflow: hidden;
}

Practical Applications

• Use Case: HTML <dialog> elements with ::backdrop for modal interactions.
• Pitfall: Forgetting overflow: hidden on the dialog may allow unintended scrolling, breaking UX.

References:

• https://css-tricks.com/prevent-a-page-from-scrolling-while-a-dialog-is-open/

---