Use overscroll-behavior: contain to prevent a page from scrolling while a is open

"While this change might seem trivial, it fixes an issue developers have been dealing with for ages: prevent a page from scrolling while a (modal) <dialog> is open. ~ CSS overscroll-behavior - which I first covered here in 2017 - allows you to control what a browser should do when reaching the boundary of a scrolling area. For example, if you set it to overscroll-behavior: contain, it will prevent scroll chaining from happening, so that underlying elements don't scroll."

"The problem with overscroll-behavior is that it only works when the scroll container is actually scrollable. For example, if you set overscroll-behavior: contain on a <dialog> that doesn't scroll, then overscroll-behavior won't do anything. There must at least be 1 pixel of overflow before overscroll-behavior kicks in. In Chrome 144 this changed, and overscroll-behavior now also works on non-scrollable scroll containers, as intended by the specification."

"While this change might go unnoticed at first, it unlocks a problem developers have been having for a long time: prevent a page from scrolling when a (modal) <dialog> is open. In Chrome 144+, all it takes is this CSS snippet: dialog { overscroll-behavior: contain; } dialog::backdrop { overflow: hidden; overscroll-behavior: contain; } The key to the code is the overflow: hidden; that you must set on the ::backdrop, as that makes it a (non-scrollable) scroll container."

Chrome 144 updates overscroll-behavior so it also applies to non-scrollable scroll containers, aligning behavior with the specification. CSS overscroll-behavior controls browser actions when a scrolling area reaches its boundary, such as preventing scroll chaining with overscroll-behavior: contain. Previously overscroll-behavior only activated when a container had at least one pixel of overflow, so non-scrolling elements like some <dialog> instances could not block page scrolling. The Chrome 144 behavior treats overflow:auto with no overflow and overflow:hidden as scroll containers. Applying overscroll-behavior: contain to dialog and setting overflow:hidden plus overscroll-behavior: contain on dialog::backdrop prevents underlying page scrolling when a modal dialog is open.

Read at Bram.us