[csswg-drafts] [css-scroll-snap] Support scroll-padding on all elements. (#7931)

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

== [css-scroll-snap] Support scroll-padding on all elements. ==
The [css-scroll-snap-1 spec](https://w3c.github.io/csswg-drafts/css-scroll-snap/) specifies that [scroll padding](https://w3c.github.io/csswg-drafts/css-scroll-snap/#scroll-padding) specifies offsets that define the optimal viewing region, however currently this is limited to scroll containers which implies a fixed optimal viewing region for all content in the scroll container.

A common use of position: sticky is to replace fixed position header bars. Consider the demo at:
https://flackr.github.io/web-demos/sticky/scrollIntoView/header-input.html

In this example, the optimal viewing region for most of the content is the entire scroller, however in order to ensure that the anchor links to the comments scroll to the correct place, scroll-padding needs to be added to the scroller (the root) to avoid them being under the header.

This works, however, if you scroll down and type into the input box the browser tries to scroll it into view (which should scroll it into the optimal viewing region). This results in each keypress scrolling up.

I propose that if we supported (and accumulated) scroll-padding and scroll-margin from all elements between the target and the scrolling container, the site could be redesigned so that the scroll padding to avoid the sticky header was only defined for the comments section which is obscured by that sticky header. This would result in the correct scrolling for the comments as well as correct scrolling for content outside of that sub view.

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


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

Received on Thursday, 20 October 2022 21:04:59 UTC