CSS-Tricks is a go-to destination for web designers and front-end developers seeking insights into CSS techniques, web design trends, and best practices. Through a rich collection of articles, tutorials, and code snippets, CSS-Tricks equips developers with the knowledge and tools needed to create visually stunning and user-friendly websites. Whether you're looking to master CSS layout techniques, explore responsive design principles, or stay updated with the latest CSS features and browser compatibility issues, CSS-Tricks offers practical guidance and inspiration for elevating your web design skills.

CSS-Tricks

Chrome 144 introduces a fix for preventing page scrolling when modal dialogs are open by extending overscroll-behavior to work on non-scrollable containers. By setting overscroll-behavior: contain on both the dialog element and body, and making the dialog a scroll container with overflow: hidden, developers can now solve this long-standing issue without JavaScript workarounds that previously required fixing body positioning.

Prevent a page from scrolling while a dialog is open

Frontend is the love of my life. Literally.

Doesn’t work for safari, firefox or even edge yet. Looking forward to seeing adoption improve.

Nice this will be a lot easier to turn off than before 😂👍 This is a strange API update the most common use case for these I see if to gate content and prevent users accessing content until the modal has been interacted with in some way - and you really want to do that securely. But I suppose it’s easier for devs to do the same thing badly now.