Chrome 144 Fixes Long-Standing Dialog Scroll Issue

Bramus has highlighted a small but significant change coming to Chrome 144: overscroll-behavior will now work on non-scrollable scroll containers. This fix addresses a problem developers have wrestled with for years—preventing the page from scrolling while a modal <dialog> is open.

The root issue is that a dialog element itself is not a scroll container. If it were, the simple fix would be applying overscroll-behavior: contain and moving on. In the past, JavaScript workarounds were needed, such as setting the <body> to fixed positioning when the dialog opens.

With Chrome 144, that JavaScript approach becomes unnecessary. Using the same concept on the native <dialog> element, you can apply overscroll-behavior: contain to both the dialog and its ::backdrop:

body {
  overscroll-behavior: contain;
}

#dialog {
  overscroll-behavior: contain;
}

However, there's a crucial final requirement: the dialog must be an explicit scroll container for the containment to take effect:

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

This change means the classic "Prevent Page Scrolling When a Modal is Open" problem can finally be solved with pure CSS, no JS required. The trade-off is that it requires Chrome 144 or later.