Stop a web page from scrolling whereas a dialog is open

Bramus:

Chrome 144 contains a small change to overscroll-behavior: it now additionally works on non-scrollable scroll containers. Whereas this variation might sound trivial, it fixes a difficulty builders have been coping with for ages: stop a web page from scrolling whereas a (modal) <dialog> is open.

YES! Approach again in 2019, I labored on “Stop Web page Scrolling When a Modal is Open” with Brad Wu about this precise factor. Apparently this was mere months earlier than we acquired our arms on the true HTML <dialog> component. In any case, you’ll be able to see the difficulty with lively scrolling when a “dialog” is open:

The issue is that the dialog itself isn’t a scroll container. If it was, we may slap overscroll-behavior: comprise on it and be carried out with it. Brad demoed his answer that concerned a JavaScript-y method that units the <physique> to fastened positioning when the dialog is in an open state:

That’s the tweak Bramus is speaking about. In Chrome 144, that’s now not the case. Going again to that first demo, we will do a few issues to keep away from all of the JS mumbo-jumbo.

First, we declare overscroll-behavior on each the dialog component and the backdrop and set it to comprise:

physique {
  overscroll-behavior: comprise;
}

#dialog {
  overscroll-behavior: comprise;
}

You’d assume that will do it, however there’s an excellent key last step. That dialog must be a scroll container, which we will do explicitly:

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

Chrome 144 wanted, in fact:

The demo that Bramus supplied is far, significantly better because it offers with the precise HTML <dialog> component and its ::backdrop:

Direct Hyperlink →