Skip to content

Add scroll-direction state and updated overflowing state to scrollable in the explainer #12130

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

Merged
merged 5 commits into from
Jun 27, 2025
Prev Previous commit
Next Next commit
Applied review comments
  • Loading branch information
tursunova committed Apr 29, 2025
commit a06df07e696169cc4d0363aadd118cb8927e2b9d
36 changes: 26 additions & 10 deletions css-conditional-5/scroll_state_explainer.md
Original file line number Diff line number Diff line change
Expand Up @@ -149,14 +149,13 @@ a carousel.

### Scrollable

Query whether a container has [scrollable overflow](https://drafts.csswg.org/css-overflow-3/#scrollable-overflow-region). Can be used to indicate
there is content to scroll to in a given direction.

Needs further exploration.
Query whether a container has [scrollable overflow](https://drafts.csswg.org/css-overflow-3/#scrollable-overflow-region).
Can be used to indicate there is content to scroll to in a given direction.

### Scroll-direction

Query based on direction of [scrolling](https://drafts.csswg.org/cssom-view/#scrolling). For instance:
Query based on direction of [scrolling](https://drafts.csswg.org/cssom-view/#scrolling).
For instance:

```css
@container scroll-state(scroll-direction: top) {
Expand All @@ -166,14 +165,33 @@ Query based on direction of [scrolling](https://drafts.csswg.org/cssom-view/#scr
}
```

#### Open questions

The initial value of `scroll-direction` is `none`. When else should
`scroll-direction` be `none`?

1. Once the scroll is [completed](https://drafts.csswg.org/cssom-view/#scroll-completed),
i.e. should match [scrollend event](https://drafts.csswg.org/cssom-view/#eventdef-document-scrollend).
2. Once the scrollbar is not moving anymore. (Note that unlike the option above
if a user is still pressing on a scrollbar after scrolling but not dragging it
anymore, the `scroll-direction` state becomes `none`).
3. Only in initial state, see [the proposal](https://github.com/w3c/csswg-drafts/issues/6400#issuecomment-2836870276).


#### Workaround

The current workaround solution to style elements based on scroll direction is by using `transition-delay` trick, see
[Solved by CSS Scroll-Driven Animations: hide a header when scrolling down, show it again when scrolling up](https://www.bram.us/2024/09/29/solved-by-css-scroll-driven-animations-hide-a-header-when-scrolling-up-show-it-again-when-scrolling-down/). However, in this approach, if a user was still pressing on the scrollbar after scrolling to the specific direction the `scroll-direction` would be considered as `none` since the scrollbar wasn't moving anymore. This behaviour is inconsistent with [the completed state of scrolling](https://drafts.csswg.org/cssom-view/#scroll-completed).
A workaround solution to style elements based on scroll direction is by using a
`transition-delay` trick, see [Solved by CSS Scroll-Driven Animations: hide a
header when scrolling down, show it again when scrolling up](https://www.bram.us/2024/09/29/solved-by-css-scroll-driven-animations-hide-a-header-when-scrolling-up-show-it-again-when-scrolling-down/).
However, in this approach, if a user was still pressing on the scrollbar after
scrolling in the specific direction the `scroll-direction` would be considered
as `none` since the scrollbar wasn't moving anymore. This behaviour matches an
option 2 in [Open Questions](#open-questions).

#### Use Cases and Author Requests

To hide/show or partially collapse some content based on the direction of scrolling.
To hide/show or partially collapse some content based on the direction of
scrolling.

- [Author request on github](https://github.com/w3c/csswg-drafts/issues/6400)

Expand All @@ -199,8 +217,6 @@ for each state which can be combined with size container types:

- `stuck`
- `snapped`
- `scrollable`
- `scroll-direction`

Query values for `stuck`:

Expand Down