Add scroll-direction state and updated owerflowing state to scrollable

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`