Container scroll-state queries: detect scroll state with pure CSS
CSS container scroll-state queries handle scroll arrows, sticky headers, and hints without JavaScript, though browser support remains limited
The article’s author, Brecht De Ruyte, shows how CSS container scroll-state queries let you detect whether a container has been scrolled, without a single line of JavaScript.
This opens up plenty of practical use cases:
- showing and hiding scroll arrows
- building “smart” sticky headers
- displaying hints only when there is scrolling
Essentially, you can safely throw away another hefty chunk of JS code with scroll subscriptions, state, and fragile logic.
Browser support is still limited; we’re waiting for Safari and Firefox. But the direction is clear: CSS is increasingly taking on UI logic that used to be considered “strictly JS territory.”
I highly recommend the article: it’s a great look at what frontend development will be like over the next few years.