Theodore L.’s Post

Let CSS know when you scroll. No JavaScript needed. Scroll-state queries let you style elements based on how a container is scrolled. You can detect when it’s at the top, bottom, or in motion, and trigger animations directly from CSS. Here’s a simple example: html { container-type: scroll-state; container-name: scroller; } .to-top { position: fixed; bottom: 20px; right: 20px; translate: 80px 0; transition: all 0.4s ease; } @container scroller scroll-state(scrollable: top) { .to-top { translate: 0 0; } } The key is `container-type: scroll-state`. It makes the page a scroll container that CSS can observe. The `@container` rule reacts to its scroll state. When the container is at the top, bottom, or being scrolled, styles update automatically. No scroll listeners. No intersection observers. Just CSS responding to motion. You can use it to fade headers, slide elements, or trigger transitions as users scroll. Browser support is about 68.5%, so it’s still experimental, use with caution (or don't use it yet). This is a glimpse of a more reactive CSS. Less scripting, more design freedom. And if you wanna grasp what's possible to do with modern CSS... I created a small 7-day email course to help you with that... Here's the link: https://lnkd.in/ezBJUPQK