Robb
Just realised that I can use :has() to lock page scrolling under modals and menus without toggling classes with JS. Handy!
Dec 7, 2022 at 11:16amWeb
Show threadRobbDec 7, 2022

This more recent CSS feels so powerful.

Stuff like this in JS can get really messy if you have multiple UI elements that can lock and unlock scroll at the same time.

The body:has(.lock-scroll) utility class method doesn't care - if that class still exists anywhere in the <body>, the scroll stays locked.

Show threadliloDec 8, 2022
@Robb Not enabled on firefox yet, though. So it's "back to the shelf you go, beautiful selector".
Show threadSara Joy Dec 8, 2022

@lilo @Robb

Come the F ON, FF

Show threadRobbDec 8, 2022
@sarajw @lilo Very much this, Sara
Show threadPelle WessmanDec 8, 2022
@Robb @lilo Will degrade fairly gracefully in this case though? So can as well keep it in?
Show threadMaarten LambrechtsDec 8, 2022
@Robb Also very handy to unlock scroll again after getting rid of annoying modals in the dev tools :)
Show threadRicard Torres 📷Dec 8, 2022
@Robb Love it!
Show threadTyler SmithDec 8, 2022

@Robb hot damn, that's neat!

I just used :has in production code base for the first time earlier this week. I'm hoping that Firefox finishes its support soon so I can start using it on more critical features

Show threadRobbDec 8, 2022

@tylerlwsmith Yeah, same. I'm only really using it for niceties and aesthetic touches at the moment.

Feels like this technique is a nice one to have in the back pocket once we get full support. It's wild to think of what it will open up once it drops in FF.

Show threadTyler SmithDec 8, 2022

@Robb right now it fits neatly into the progressive enhancement space

I'm currently using it to add some padding to the top of the body if the fixed-position header has a notification banner attached to the bottom of it. It gives more breathing room between the header and the page content, but it isn't critical for usability

Show threadMichael KlöpzigDec 8, 2022
@tylerlwsmith @Robb Yeah, :has replaces so many JS-hacks, it's a real game changer. For FF, overscroll-behaviour:contain on the modal helps a lot to improve the double scrollbar problem in the meantime.
Show threadDavid McCormickDec 8, 2022
@Robb if the modal is a `dialog` element, it would have an `open` attribute so `body:has(dialog[open])` would do the trick. I think.
Show threadTobias Haagen MichaelsenDec 8, 2022
@dmc @Robb it should probably be `body:has(dialog:modal)` since `[open]` will also match non-modal dialogs. Could even drop the `dialog` to just check for the presence of any modal elements, so `body:has(:modal) { overflow: hidden; }`
Show threadDavid McCormickDec 8, 2022
@tobiashm @Robb good shout
Show threadDerek P. CollinsDec 8, 2022
@Robb Ooo, nice!
Show threadÅ ime VidasDec 8, 2022

@Robb It seems that overscroll-behavior: none does not work on ::backdrop

https://jsbin.com/qidehez/edit?html,css,output

JS Bin

A live pastebin for HTML, CSS & JavaScript and a range of processors, including SCSS, CoffeeScript, Jade and more...

Show threadkaiserkiwi Dec 8, 2022
@Robb I love this selector more with every day.
Show threadSimonDec 9, 2022
@Robb My problem with this is usually that the page under the modal can jump a bit if it suddenly loses its scrollbar for which some space was reserved. In the past I've solved this with JS by measuring the scrollbar width and readding it as padding to the page.
These days I'd probably just rely on overscroll-behavior:contain instead.
Show threadMichaelDec 23, 2022
@Robb this is really neat, actually!