[csswg-drafts] Add `@container scroll-state(direction)` to [css-conditional-5] (#11082)

argyleink has just created a new issue for https://github.com/w3c/csswg-drafts:

== Add `@container scroll-state(direction)` to [css-conditional-5] ==
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](https://codepen.io/utilitybend/pen/bGjQqXg) (this one doesn't turn around, showing the issue) or for showy/hidey navigation bars ([a very popular pattern](https://andrewwalpole.com/blog/the-showy-hidey-nav-bar/)). 

There's even Bramus who's [written about how to derive the scroll direction](https://www.bram.us/2023/10/23/css-scroll-detection/#the-concept-4) using some tricky custom property timings in combination with scroll driven animation. [Here's Bramus solving the duck](https://www.bram.us/2023/10/23/css-scroll-detection/#demo-directional-chicky-scroll) 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.

```css
.scroll-container {
  container-type: scroll-state;
  overflow: auto;
  
  nav.sticky {
    @container scroll-state(direction: forward) {
      visibility: hidden;
    }

    @container scroll-state(direction: backward) {
      visibility: visible;
    }
  }
}
```

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` and `backward` here as the keywords, but am open to suggestions.

Relevant spec: https://drafts.csswg.org/css-conditional-5/#scroll-state-container

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11082 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 24 October 2024 15:47:46 UTC