From 316ff620913dbf983e5c5b5457af893ab7d069b4 Mon Sep 17 00:00:00 2001 From: Munira Tursunova Date: Mon, 28 Apr 2025 16:01:19 +0200 Subject: [PATCH 1/5] Add scroll-direction state and updated owerflowing state to scrollable --- css-conditional-5/scroll_state_explainer.md | 66 ++++++++++++++++++++- 1 file changed, 64 insertions(+), 2 deletions(-) diff --git a/css-conditional-5/scroll_state_explainer.md b/css-conditional-5/scroll_state_explainer.md index b75ee3d2b53..0011d6e491d 100644 --- a/css-conditional-5/scroll_state_explainer.md +++ b/css-conditional-5/scroll_state_explainer.md @@ -147,13 +147,36 @@ a carousel. - [Author request on github](https://github.com/w3c/csswg-drafts/issues/7430) -### Overflowing +### Scrollable -Query whether a container has scrollable overflow. Can be used to indicate +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. +### Scroll-direction + +Query based on direction of [scrolling](https://drafts.csswg.org/cssom-view/#scrolling). For instance: + +```css +@container scroll-state(scroll-direction: top) { + .scrolling-up { + translate: 0 0; + } +} +``` + +#### 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). + +#### Use Cases and Author Requests + +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) + ### Anchor position fallback In earlier exploration of anchor positioning, it was suggested that container @@ -176,6 +199,8 @@ for each state which can be combined with size container types: - `stuck` - `snapped` +- `scrollable` +- `scroll-direction` Query values for `stuck`: @@ -192,6 +217,43 @@ Query values for `stuck`: Query values for `snapped`: - `none` +- `x` +- `y` +- `block` +- `inline` +- `both` + +Query values for `scrollable`: + +- `none` +- `top` +- `right` +- `bottom` +- `left` +- `block-start` +- `inline-start` +- `block-end` +- `inline-end` +- `x` +- `y` +- `block` +- `inline` + + +Query values for `scroll-direction`: + +- `none` +- `any` +- `top` +- `right` +- `bottom` +- `left` +- `block-start` +- `inline-start` +- `block-end` +- `inline-end` +- `x` +- `y` - `block` - `inline` From a06df07e696169cc4d0363aadd118cb8927e2b9d Mon Sep 17 00:00:00 2001 From: Munira Tursunova Date: Tue, 29 Apr 2025 15:14:22 +0200 Subject: [PATCH 2/5] Applied review comments --- css-conditional-5/scroll_state_explainer.md | 36 +++++++++++++++------ 1 file changed, 26 insertions(+), 10 deletions(-) diff --git a/css-conditional-5/scroll_state_explainer.md b/css-conditional-5/scroll_state_explainer.md index 0011d6e491d..6154187d96e 100644 --- a/css-conditional-5/scroll_state_explainer.md +++ b/css-conditional-5/scroll_state_explainer.md @@ -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) { @@ -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) @@ -199,8 +217,6 @@ for each state which can be combined with size container types: - `stuck` - `snapped` -- `scrollable` -- `scroll-direction` Query values for `stuck`: From 42fe3942f8fb64aa1350d03576758d4f01d47b58 Mon Sep 17 00:00:00 2001 From: Munira Tursunova Date: Mon, 23 Jun 2025 16:06:22 +0200 Subject: [PATCH 3/5] Specified recent/active scroll-direction state, renamed to --- css-conditional-5/scroll_state_explainer.md | 54 ++++++++++++--------- 1 file changed, 30 insertions(+), 24 deletions(-) diff --git a/css-conditional-5/scroll_state_explainer.md b/css-conditional-5/scroll_state_explainer.md index 6154187d96e..450534838b6 100644 --- a/css-conditional-5/scroll_state_explainer.md +++ b/css-conditional-5/scroll_state_explainer.md @@ -152,41 +152,25 @@ 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. -### Scroll-direction +### Direction -Query based on direction of [scrolling](https://drafts.csswg.org/cssom-view/#scrolling). +Query based on the most recent direction of [scrolling](https://drafts.csswg.org/cssom-view/#scrolling). For instance: ```css -@container scroll-state(scroll-direction: top) { +@container scroll-state(direction: top) { .scrolling-up { translate: 0 0; } } ``` -#### 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 -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). +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 `transition-delay` trick to get the active scroll direction. #### Use Cases and Author Requests @@ -195,6 +179,28 @@ scrolling. - [Author request on github](https://github.com/w3c/csswg-drafts/issues/6400) +#### Open questions + +- Should `none` keyword be removed? Then we can use `inline-start` and +`block-start` as initial values. + +In case if the answer to the question above is yes: + +- Values `any`, `X`, `Y`, `block` and `inline` will always match, so there +would be no point of having them. +- Should we match `inline-start` or `block-start` if there is no +horizontal/vertical scroller, i.e. if we have latin script and only vertical +scroller, should we match `inline-start` initially? + +#### 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). + +This needs further discussion with the working group. + ### Anchor position fallback In earlier exploration of anchor positioning, it was suggested that container @@ -256,7 +262,7 @@ Query values for `scrollable`: - `inline` -Query values for `scroll-direction`: +Query values for `direction`: - `none` - `any` From 2c2d3679ec96e7366e4b672125bb1cf0318de79b Mon Sep 17 00:00:00 2001 From: Munira Tursunova Date: Thu, 26 Jun 2025 21:01:29 +0200 Subject: [PATCH 4/5] Modified open questions --- css-conditional-5/scroll_state_explainer.md | 18 +++++------------- 1 file changed, 5 insertions(+), 13 deletions(-) diff --git a/css-conditional-5/scroll_state_explainer.md b/css-conditional-5/scroll_state_explainer.md index 450534838b6..443b3c5b8f2 100644 --- a/css-conditional-5/scroll_state_explainer.md +++ b/css-conditional-5/scroll_state_explainer.md @@ -179,19 +179,6 @@ scrolling. - [Author request on github](https://github.com/w3c/csswg-drafts/issues/6400) -#### Open questions - -- Should `none` keyword be removed? Then we can use `inline-start` and -`block-start` as initial values. - -In case if the answer to the question above is yes: - -- Values `any`, `X`, `Y`, `block` and `inline` will always match, so there -would be no point of having them. -- Should we match `inline-start` or `block-start` if there is no -horizontal/vertical scroller, i.e. if we have latin script and only vertical -scroller, should we match `inline-start` initially? - #### Active scroll direction The proposed `direction` feature matches the state of the most recent @@ -201,6 +188,11 @@ event](https://drafts.csswg.org/cssom-view/#eventdef-document-scrollend). This needs further discussion with the working group. +#### Programmatic scrolling + +The question about which programmatic scrolls should affect scroll direction +feature is discussed in [the issue](https://github.com/w3c/csswg-drafts/issues/12394). + ### Anchor position fallback In earlier exploration of anchor positioning, it was suggested that container From 7ef063753a63c301b4ac7f0d990c6b2938a34ac1 Mon Sep 17 00:00:00 2001 From: Munira Tursunova Date: Fri, 27 Jun 2025 12:44:44 +0200 Subject: [PATCH 5/5] Applied review comments --- css-conditional-5/scroll_state_explainer.md | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/css-conditional-5/scroll_state_explainer.md b/css-conditional-5/scroll_state_explainer.md index 443b3c5b8f2..d4b2135361d 100644 --- a/css-conditional-5/scroll_state_explainer.md +++ b/css-conditional-5/scroll_state_explainer.md @@ -154,7 +154,7 @@ Can be used to indicate there is content to scroll to in a given direction. ### Direction -Query based on the most recent direction of [scrolling](https://drafts.csswg.org/cssom-view/#scrolling). +Query the most recent direction of [scrolling](https://drafts.csswg.org/cssom-view/#scrolling). For instance: ```css @@ -170,7 +170,7 @@ For instance: 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 `transition-delay` trick to get the active scroll direction. +uses a `transition-delay` trick to get the active scroll direction. #### Use Cases and Author Requests @@ -257,7 +257,6 @@ Query values for `scrollable`: Query values for `direction`: - `none` -- `any` - `top` - `right` - `bottom`