Directional CSS with scroll-state(scrolled)
Published on December 17, 2025

There’s a new scroll-state() query in town, and it’s rolling out in Chrome 144. The scrolled state query lets you apply styles based on the last scroll direction of your user’s well.. scroll. This unlocks a ton of new possibilities, and I couldn’t help but get my hands on trying it out.

clamp - Le responsive fluide sans Media Queries

An Interactive Guide to CSS Container Queries
Learn how to use CSS container queries today.

26 Seamless CSS Page Transitions

Locking scroll with :has().

It's finally happened – with the release of Firefox 121.0 :has() has landed in all browsers (though writing ":has() has" is sadly no less awkward). In celebration, I thought it a good time to share one of my favourite practical uses of :has() so far – scroll locks.

Imagine that you need to open a modal window, or flyout menu. To prevent from losing the user's place in the page whilst that modal is open – particularly on mobile devices – it's good practice to prevent the page behind it from scrolling. That's a scroll lock.

Let's take a look at how we might implement one.