Chrome 144 incorporates a small change to
overscroll-behavior: it now additionally works on non-scrollable scroll containers. Whereas this variation may appear trivial, it fixes a difficulty builders have been coping with for ages: stop a web page from scrolling whereas a (modal)is open.
YES! Approach again in 2019, I labored on “Forestall Web page Scrolling When a Modal is Open” with Brad Wu about this precise factor. Apparently this was mere months earlier than we received our arms on the true HTML aspect. In any case, you possibly can 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 might slap overscroll-behavior: comprise on it and be executed with it. Brad demoed his answer that concerned a JavaScript-y strategy that units the 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 aspect and the backdrop and set it to comprise:
physique {
overscroll-behavior: comprise;
}
#dialog {
overscroll-behavior: comprise;
}You’d assume that may do it, however there’s a brilliant key remaining step. That dialog must be a scroll container, which we will do explicitly:
#dialog {
overscroll-behavior: comprise;
overflow: hidden;
}Chrome 144 wanted, after all:
The demo that Bramus supplied is far, significantly better because it offers with the precise HTML aspect and its ::backdrop:
