Skip to content

Rename direction to scrolled, updated explainer #12881

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.

Sign up for GitHub

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 1 commit into from
Sep 30, 2025
Merged

Rename direction to scrolled, updated explainer #12881

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions css-conditional-5/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1589,18 +1589,18 @@ Scrollable: the '@container/scrollable' feature</h4>
The [=scroll container=] has [=scrollable overflow=] in its inline direction.
</dl>

<h4 id="direction">
Direction: the '@container/direction' feature</h4>
<h4 id="scrolled">
Scrolled: the '@container/scrolled' feature</h4>

<pre class="descdef mq">
Name: direction
Name: scrolled
For: @container
Value: none | top | right | bottom | left | block-start | inline-start | block-end | inline-end | x | y | block | inline
Type: discrete
</pre>

For a [=query container=] that is a [=scroll container=],
the '@container/direction' [=container feature=] queries the direction of its most recent [=relative scroll=].
the '@container/scrolled' [=container feature=] queries the direction of its most recent [=relative scroll=].
The logical values map to physical based on the direction and writing-mode of the [=query container=].
None of the values match if the container is not a [=scroll container=].

Expand Down
19 changes: 10 additions & 9 deletions css-conditional-5/scroll_state_explainer.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,13 +152,13 @@ a carousel.
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.

### Direction
### Scrolled

Query the most recent direction of [scrolling](https://drafts.csswg.org/cssom-view/#scrolling).
Query the direction of [the most recent relative scroll](https://drafts.csswg.org/css-scroll-snap-1/#scroll-types).
For instance:

```css
@container scroll-state(direction: top) {
@container scroll-state(scrolled: top) {
.scrolling-up {
translate: 0 0;
}
Expand All @@ -167,8 +167,8 @@ For instance:

#### Workaround

A workaround solution to create queries based on scrolling direction is
described in [Solved by CSS Scroll-Driven Animations: hide a header when
A workaround solution to create queries based on scrolling direction
is described in [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/),
uses a `transition-delay` trick to get the active scroll direction.

Expand All @@ -181,10 +181,11 @@ scrolling.

#### Active scroll direction

The proposed `direction` feature matches the state of the most recent
scroll direction. Web authors might also want to create queries based on the
current scroll direction, not only the most recent one, similar to [scrollend
event](https://drafts.csswg.org/cssom-view/#eventdef-document-scrollend).
The proposed `scrolled` feature
matches the state of the most recent relative scroll direction.
Web authors might also want to create queries
based on the active scroll direction, not only the most recent one,
similar to [scrollend event](https://drafts.csswg.org/cssom-view/#eventdef-document-scrollend).

This needs further discussion with the working group.

Expand Down