Re: [csswg-drafts] Add scroll-direction state and updated overflowing state to scrollable in the explainer (#12130)

> The examples in @bramus' [article](https://www.bram.us/2023/10/23/css-scroll-detection/) have a lot of use cases that only care about the recent scroll direction.

But there’s also demos that depend the last-non-`none` direction. The “Hidey Bar” is the typical example for this, which Tab also [mentioned](https://github.com/w3c/csswg-drafts/pull/12130#issuecomment-2839534205).

In https://brm.us/hidey-bar I figured out how to _“remember”_ the last-non-`none` direction: by (ab)using an infinite `transition-delay` on the custom prop that stores the direction – as documented in the explainer that is part of this PR.

Would be nice/handy if this “remember“ option were built into the API. Some ideas:

1. Perhaps we distinguish between `scroll-direction` and `active-scroll-direction`?
  - `active-scroll-direction` represents the active scroll direction. If you stop scrolling, it becomes `none` again.
  - `scroll-direction` starts as `none` but once you scroll it remembers the last active scroll direction that is not `none`.
2. More values? E.g. `idle-after-down`

Personal preference for 1 – seems more easy for authors.

---

> Another question - do we want to remember the scroll direction of each axis independently, or together?

Good question. I see one use cases for scroll-based games that allow you to control a character walking in a 8-directional movement (cardinal directions + diagonals), which would rely on remembering each axis independently.

- More values such as `down-right`?
- More `scroll-direction` variants? i.e. `(active-)(vertical|horizontal)-scroll-direction`

But you could ask yourself if that’s a common enough use-case to tackle …

-- 
GitHub Notification of comment by bramus
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/pull/12130#issuecomment-2875799272 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 13 May 2025 09:49:56 UTC