Add @container scroll-state(direction)
to [css-conditional-5]
#11082
Labels
css-conditional-5
Current Work
@container scroll-state(direction)
to [css-conditional-5]
#11082
It's common for developers to write a small bit of javascript to observe the scroll direction and derive a boolean state of whether it's progressing or regressing. This is useful for flipping the direction of say, a duck walking across the bottom of the screen (this one doesn't turn around, showing the issue) or for showy/hidey navigation bars (a very popular pattern).
There's even Bramus who's written about how to derive the scroll direction using some tricky custom property timings in combination with scroll driven animation. Here's Bramus solving the duck so it turns around and walks back instead of moonwalking, but requires Canary at the moment.
I'd like to propose that directionality is added to the Scroll State Query feature. It would make this trivial.
This example shows how a scroller can hide a sticky nav while scrolling down/forward, and show it when scrolling up/backwards. Folks could easily use CSS transforms and transitions to animate this instead of the simplified show/hide in the example snippet.
I am proposing
forward
andbackward
here as the keywords, but am open to suggestions, and also haven't accounted for a scroller that works on both axes. Maybe they should bedown
,up
,left
andright
?Relevant spec: https://drafts.csswg.org/css-conditional-5/#scroll-state-container
The text was updated successfully, but these errors were encountered: