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

Recently also came up in a discussion where an author wants to hide certain toolbars as the user scrolls down, but re-show those toolbars once they scroll back up again - a pretty common pattern which [was already acknowledged as such by the WG here](https://github.com/w3c/csswg-drafts/issues/5670#issuecomment-887648981)

A solution I was thinking of, was to use media queries.

```css
@media (scroll-direction: block | block-start | block-end | inline | inline-start | inline-end ) { … }
```

Values are:

- `block`: Scrolling in the block direction _(aka to the top or bottom in a “default” ltr+toptobottom scenario)_
- `block-start`: Scrolling in the `block-start` direction _(aka to the top in a “default” ltr+toptobottom scenario)_
- `block-end`: Scrolling in the `block-start` direction _(aka to the bottom in a “default” ltr+toptobottom scenario)_
- `inline`: Scrolling in the `inline` direction _(aka to the left or right in a “default” ltr+toptobottom scenario)_
- `inline-start`: Scrolling in the `inline-start` direction _(aka to the left in a “default” ltr+toptobottom scenario)_
- `inline-end`: Scrolling in the `inline-end` direction _(aka to the right in a “default” ltr+toptobottom scenario)_

When you reach the start or end of a scroller, the values would still keep on being truthy: say you're at the bottom of the page and are overscrolling, `@media (scroll-direction: block-end)` would still be in effect.

By using a MQ, one could also easily nest them once css-nesting lands:

```css
#navbar {
  position: sticky;
  top: 0;
  transition: transform 0.25s ease-in;

  /* Hide when scrolling towards the bottom */
  @media (scroll-direction: block-end) {
    transition-delay: 250ms;
    transform: translateY(-95%);
  }
}
```

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


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

Received on Thursday, 16 June 2022 20:29:55 UTC