Chrome 144 encompasses a small change to
overscroll-behavior: it now additionally works on non-scrollable scroll containers. Whereas this modification may appear trivial, it fixes a difficulty builders have been coping with for ages: forestall a web page from scrolling whereas a (modal)is open.
YES! Means 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 obtained our fingers on the true HTML component. In any case, you may see the difficulty with energetic 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 achieved with it. Brad demoed his answer that concerned a JavaScript-y strategy that units the to mounted positioning when the dialog is in an open state:
That’s the tweak Bramus is speaking about. In Chrome 144, that’s not the case. Going again to that first demo, we are able to 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 suppose that may do it, however there’s a brilliant key last step. That dialog must be a scroll container, which we are able to do explicitly:
#dialog {
overscroll-behavior: comprise;
overflow: hidden;
}Chrome 144 wanted, after all:
The demo that Bramus offered is far, significantly better because it offers with the precise HTML component and its ::backdrop:
