Re: [csswg-drafts] [css-ui][proposal] Current scrolling direction pseudoclasses (#6400)

> What if the developer wants to only bring in or out a toolbar after a delay

Authors can use `transition-delay: 250ms;` for that.

> … or certain number of pixels scrolled

This would not be covered by the proposed feature, but would be something for the future scroll-triggered animations spec _(not to be confused with the current scroll-**linked** animations spec)_.

---

I do expect implementers to include some cleverness when detecting the scroll-direction, such as using some kind of (small) threshold before triggering a direction change.

Thinking out loud here, it would be something that takes both distance and time into account. Say that the scroll-detection runs every `100ms` _(just grabbing a number here)_, it would need to check whether a certain distance `THRESHOLD` was scrolled, and only then do the direction.

In JS code _(line 9)_:

```js
const THRESHOLD = 10;
let curScrollPosition = 0, prevScrollPosition = 0;

setInterval(() => {
  // Capture current scrollPosition
  curScrollPosition = …;

  // Bail out if scrolled only for a tiny amount
  if(Math.abs(prevScrollPosition - curScrollPosition) <= THRESHOLD) return;

  // @TODO: draw rest of the owl ..
  
  // Get ready for next tick
  prevScrollPosition = curScrollPosition;
}, 100);
```

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


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

Received on Friday, 17 June 2022 11:39:02 UTC