Hmm good question, You can use the scrollable scroll state query there:

@container scroll-state(scrollable: bottom)

Sure, I think in one of my demos I show the check for before you scroll

@container scroll-state(scrolled: none)

Indicates no scroll has occurred yet

You could nest these (the stuck inside of the scrolled)

Definitely add @nerdy.dev @bram.us @kizu.dev @utilitybend.com @joshwcomeau.com @ishadeed.com @css-only.dev @lea.verou.me (there’s so many this is just immediately what’s off the top of my head/feeds I follow)

Yes! I can give you some recs. Lots of great web devs I follow. I also started doing email notifications for RSS so I don’t miss things for a select few :)

Ooh add me to your list!

Is it the colors one?! Great read!

💯

I also think @bram.us has a hack for scroll-triggering with scroll driven animation which would have (at least a-single-version-of-chrome better browser support)

Here's a demo doing what you're asking: codepen.io/una/pen/wBWv...

It has a header that stays in position until it reaches 40px of scroll. Then, at 40px, it animates away. When you start to scroll back up, the header animates back in.

I am off today but easily nerd-sniped 😆

I see, so you want it to trigger on scroll direction but you don’t want it to start until 40px down? Maybe you can still use scroll-triggered animations to apply a custom property value for the translation amount at a trigger point, then override it with scroll state queries

You can do this with scroll-triggered animations (see latest blog post on Una.im)

See also “Workday” and name@ 😆

Interesting idea. I proposed isolation mode a while back for devtools

I got you 😉

I just built a demo of this for a blog post yesterday :)

codepen.io/una/pen/xbVo...