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

> 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

Both of these demos, and many of the others which only have an effect while scrolling also use the velocity, or at least would benefit from using the scroll velocity. This suggests to me that a scroll driven animation would better suit these use cases, e.g.

```css
.tilt {
  animation: tilt linear both;
  animation-timeline: scroll-speed();
  /* Getting very creative with units here. */
  animation-range: -100px/s 100px/s;
}
```

I suspect a somewhat common use case, given sufficient delays before returning to the none state, might be to recreate overlay scrollbars (i.e. temporarily show a scrollbar thumb when there has been recent scrolling). However this is likely a bit of a usability challenge.

> 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.

The hidey bar case is an extremely common use case in the wild (typically implemented in JS), and the one for which this API was designed. We should focus on solving this use case well - for which we need to have the last scrolled direction persisted. It may be nice / handy if we had the option to handle the is actively scrolling case, however, I haven't seen too many use cases in the wild of this which aren't also velocity dependent and would need more than the scroll direction.

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


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

Received on Thursday, 15 May 2025 20:06:53 UTC