[csswg-drafts] proposal: scroll-index (priority) (#5670)

jeysal has just created a new issue for https://github.com/w3c/csswg-drafts:

== proposal: scroll-index (priority) ==
## Use case

Many pages consist of a full-width (and for example `64px` height) header at the top and a full-width (and for example `100vh - 64px` height) main content below it.
Many of those pages want the header to scroll out above the top of the viewport whenever the user starts scrolling down on the page, and scroll back in below the top of the viewport whenever the user starts scrolling up on the page. As far as I know, this is today implemented using JavaScript.

It is already possible to structure e.g. a grid layout to be able to scroll out a header.
The grid has `64px + 100vh` height (y-overflowing the initial containing block), the header in its top row has `64px` height, and the main content in its bottom row has `100vh` height (and of course its content can y-overflow).

However, this is not sufficient to achieve the experience a user would expect.
If all scrollbars are in the top position and the user starts scrolling down in the main content, first the main content will scroll all the way to the bottom, and only once it can scroll no more, the top of the grid with the header is scrolled out of the viewport.
Likewise, if all scrollbars are in the bottom position and the user starts scrolling up in the main content, first the main content will scroll all the way to the top, and only once it can scroll no more, the top of the grid with the header is scrolled into the viewport.

There is another problem with the layout I described - there are two scrollbars, which does not look nice, but it seems this is already being worked on in css-scrollbars.

## Proposal

I propose a `scroll-index` (resembling `z-index` in naming) or `scroll-priority` property that can be used to customize the order in which the user agent will try to scroll overflowing containers (whether using a scroll wheel or touch input) and takes precedence over the 'default priority' which is based on the structure of the elements. In particular, it can also be used to scroll a parent before its child when scrolling in the child.

This of course has interactions with things like `overscroll-behavior`, but none come to my mind that do not have an intuitive solution.

## Notes

This suggestion does not clearly fit into the `overflow`, `overscroll-behavior` or another scrolling-related module, so I left it untagged for now.

I apologize if this has been suggested before; I did not find relevant issues with multiple searches.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5670 using your GitHub account


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

Received on Tuesday, 27 October 2020 17:35:59 UTC