Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
argyleink opened this issue Oct 24, 2024 · 5 comments
Closed

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

argyleink opened this issue Oct 24, 2024 · 5 comments
Labels
css-conditional-5 Current Work

Comments

@argyleink
Copy link
Contributor

argyleink commented Oct 24, 2024

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.

.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, and also haven't accounted for a scroller that works on both axes. Maybe they should be down, up, left and right?

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

@lilles lilles added the css-conditional-5 Current Work label Oct 24, 2024
@hvanops
Copy link

hvanops commented Oct 24, 2024

@flackr also suggested a default value in the cases where no scroll is happening. For example, when the user first lands on the page or if they are just reading something and not moving the scrollbar.
Rob- feel free to add to or correct my understanding.

@argyleink
Copy link
Contributor Author

where no scroll is happening

sounds like another proposal for a scroll-state query!? since it's binary; is it scrolling currently, or not. could compose it then with other queries too. but maybe abstracting the concept of moving or not is more tied with the direction than i'm thinking.

@smfr
Copy link
Contributor

smfr commented Oct 24, 2024

Would this apply for programmatic scrolls (scrollTo(), and those triggered by layout changes)? If so, I worry about circularity.

@bramus
Copy link
Contributor

bramus commented Oct 24, 2024

Duplicate of #6400?

@argyleink
Copy link
Contributor Author

closing in favor of #6400!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
css-conditional-5 Current Work
Projects
None yet
Development

No branches or pull requests

5 participants