"In any case, you can see the trouble with active scrolling when a "dialog" is open: The problem is that the dialog itself is not a scroll container. If it was, we could slap overscroll-behavior: contain on it and be done with it. Brad demoed his solution that involved a JavaScript-y approach that sets the <body> to fixed positioning when the dialog is in an open state:"
"First, we declare overscroll-behavior on both the dialog element and the backdrop and set it to contain: body { overscroll-behavior: contain; } #dialog { overscroll-behavior: contain; } You'd think that would do it, but there's a super key final step. That dialog needs to be a scroll container, which we can do explicitly: #dialog { overscroll-behavior: contain; overflow: hidden; }"
Chrome 144 makes overscroll-behavior apply to non-scrollable scroll containers, which prevents the underlying page from scrolling while a modal <dialog> is open. Previously the <dialog> was not a scroll container, so developers used JavaScript workarounds such as fixing the <body> position to stop page scroll. A pure-CSS approach now works by declaring overscroll-behavior: contain on the dialog and its backdrop and making the dialog a scroll container (for example by setting overflow: hidden). This removes the need for JS body-fix hacks and works with the HTML <dialog> element and backdrop.
Read at CSS-Tricks
Unable to calculate read time
Collection
[
|
...
]