{"id":938,"date":"2024-02-19T13:01:09","date_gmt":"2024-02-19T19:01:09","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=938"},"modified":"2024-09-12T10:20:25","modified_gmt":"2024-09-12T15:20:25","slug":"scroll-locked-dialogs","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/scroll-locked-dialogs\/","title":{"rendered":"Scroll-Locked Dialogs"},"content":{"rendered":"\n

I just wrote about the <dialog><\/code> element<\/a>, with some basic usage and things to watch for. It’s a great addition to the web platform. <\/p>\n\n\n\n

Here’s another interesting thing we can do, connecting it to another one of my favorite new things on the web platform: :has()<\/code>. (You can see I’ve been pretty into it<\/a> lately.) I was reading Locking scroll with :has()<\/a> from Robb Owen, and he gets into how you might want to prevent the page from scrolling when a modal is open.<\/p>\n\n\n\n

\n

To prevent from losing the user’s place in the page whilst that modal is open \u2013 particularly on mobile devices \u2013 it’s good practice to prevent the page behind it from scrolling. That’s a scroll lock.<\/p>\n<\/blockquote>\n\n\n\n

I like that. The user can’t interact with what’s behind the modal anyway, as focus is trapped into a modal (that’s what a modal is). So, might as well make sure they don’t inadvertently scroll away. Without doing anything, scrolling is definitely not locked. <\/p>\n\n\n\n\t\t

\n\t\t\t