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

* Add scroll-direction state and updated owerflowing state to scrollable

* Applied review comments

* Specified recent/active scroll-direction state, renamed  to

* Modified open questions

* Applied review comments

Author: tursunova

css-conditional-5/scroll_state_explainer.md

@@ -147,12 +147,51 @@ 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
-there is content to scroll to in a given direction.
+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.
+### Direction
+
+Query the most recent direction of [scrolling](https://drafts.csswg.org/cssom-view/#scrolling).
+For instance:
+
+```css
+@container scroll-state(direction: top) {
+  .scrolling-up {
+    translate: 0 0;
+  }
+}
+```
+
+#### Workaround
+
+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.
+
+#### 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)
+
+#### 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.
+
+#### 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
 
@@ -192,6 +231,42 @@ 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 `direction`:
+
+- `none`
+- `top`
+- `right`
+- `bottom`
+- `left`
+- `block-start`
+- `inline-start`
+- `block-end`
+- `inline-end`
+- `x`
+- `y` 
 - `block`
 - `inline`