- From: Bramus via GitHub <sysbot+gh@w3.org>
- Date: Thu, 15 May 2025 09:37:31 +0000
- To: public-css-archive@w3.org
> […] since you don’t want to duplicate the scroll state query value into a custom property which you then use in the rest of your code.
Actually, you don’t need to store the scroll-direction into a custom prop (+ then use style queries to respond to it) but can do this instead to respond to the last non-`none` scroll-direction:
```css
@property --translate {
…
}
@container scroll-state(active-scroll-direction: down) {
header {
--translate: -100%;
}
}
@container scroll-state(active-scroll-direction: up) {
header {
--translate: 0;
}
}
header {
translate: 0 var(--translate);
transition: --translate 0.25s 0s ease;
}
@container scroll-state(active-scroll-direction: none) {
header {
transition: --translate 0s calc(Infinity * 1s) ease;
}
}
```
Still a bit complex though (especially when having multiple values that need to respond to it), so I still prefer to have this built-in.
--
GitHub Notification of comment by bramus
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6400#issuecomment-2883192490 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Thursday, 15 May 2025 09:37:32 UTC