Re: [csswg-drafts] [css-ui][selectors][mediaqueries] Expose current scrolling direction (#6400)

> An open question is when it should match `none`. On initial page load seems pretty obvious, as it hasn't been scrolled yet, but is there a precedent in existing UIs for a scroller "returning to unscrolled" after some time has passed with it sitting still? Unless people have some good examples, I propose that it's just an initial state that can't be returned to after the user has scrolled once.

_(I left (some form) of this comment also as a reply on [the explainer PR](https://github.com/w3c/csswg-drafts/pull/12130), but repeating it here for visibility)_

There are a bunch of demos I built for https://www.bram.us/2023/10/23/css-scroll-detection/ that depend only on the _active_ scroll direction (and also scroll speed). Once you stop scrolling, the effect no longer applies.

For example:
- Motion Blur Scroll: https://codepen.io/bramus/full/XWoREjv
- BADASS: https://codepen.io/bramus/full/OJrxBaL

The “Hidey Bar” then OTOH is the typical example that depends on the last non-`none` `scroll-direction` value. In https://brm.us/hidey-bar I _“remember”_ the last-non-`none` direction by (ab)using an infinite `transition-delay` on the custom prop that stores the direction. But it would be nice/handy if this “remember“ option were built into the API of course, since you don’t want to duplicate the scroll state query value into a custom property which you then use in the rest of your code.

So I think the API should support both options, as there are use-cases for both.

Some ideas:

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

Personal preference for 1 as it seems more easy for authors 2 would become a keyword-mess.

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


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

Received on Wednesday, 14 May 2025 09:08:49 UTC