Re: [csswg-drafts] [css-overflow] Proposing `scroll-start`: allowing overflow scroll to not always start at 0 on 1st layout pass (#6986)

The idea itself is great! Thank you @argyleink for bringing that up!

I have some notes, though. 

1. `scroll-start-target` looks like a longhand for `scroll-start`.
2. Talking of setting the scroll position with x and y coordinates, why not use a[ `<position>` value](https://drafts.csswg.org/css-values/#position) for that?
3. What happens when multiple scroll container children have `scroll-start-target` defined?
4. Both properties do the same thing, except one is set on the container, the other on a child?

To answer those questions here's my counter-proposal:

```
scroll-position = <position> || selector(<id-selector>)
```

Examples (rewritten from the initial comment):

```css
:root { --nav-height: 100px; }

.snap-scroll-y {
  scroll-position: 0 var(--nav-height);
}
```

```css
.snap-scroll-inline {
  overflow-inline: scroll;
  scroll-snap-type: inline mandatory;
  scroll-position: selector(#snap-start);
}
```

Explanation:

We concentrate the functionality in one property set on the scroll container. As this initial scroll position only has effect on scrollport creation before any user interaction, it means the DOM already needs to be fully available at that point in time. So setting it on the container with a selector for the child should be fine.
If the selector matches multiple elements, the first one in document order is considered to be the target.
Also, allowing to set both the selector _and_ the position allows to define offsetting from that element.

Additional note: The property is independent from the things defined in [CSS Scroll Snap 1](https://drafts.csswg.org/css-scroll-snap/). I.e. you can define a scroll position without having any scroll snap containers.

-----

Having said all that, another approach could be to align with CSS Scroll Snap 1, and there specifically with `scroll-padding-*` and/or `scroll-margin-*`. You'd then just need to have a way to specify the initial [scroll snap position](https://drafts.csswg.org/css-scroll-snap/#scroll-snap-position).

Sebastian

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


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

Received on Thursday, 27 January 2022 20:21:43 UTC