scroll-start

[argyleink]

Context: explainer

Questions?
Thoughts?
Naming fine?
Risks?

[brunostasse]

Defining an initial scroll position in CSS is definitely something that is needed today for the use cases mentioned in the draft. The main problem it would solve for me is preventing the shift caused by the scroll after a page load (for server side rendered/static pages), which is pretty bad UX.

Here are a few other use cases I have in mind:

• tabs, when starting at a specific tab on page load;
• hiding elements at the top of a page, only showed when scrolling all the way up, as done on iOS for search bars;
• scrollable page navigation (horizontal or vertical), containing the headings present in the page, which must be scrolled on page load if the page is scrolled (with a # in the URL, or through this property).

Question: I suppose this property would take into account the properties scroll-margin and scroll-padding?

---

What I'm wondering is whether this property could not be given more power, allowing to set the scroll position whenever it is applied, instead of only at the rendering of the scroll container. It would therefore be transformed into a scroll-x or scroll-position-x and scroll-y or scroll-position-y.

This certainly has broader implications than only setting it at the rendering time, and I am not sure it is the best way to go, but it would make sense and might be useful:

• Scrolling is just like a transform: translate(), but at another level, right? It moves visually some elements on the page. We set the values of translate in CSS, but set the values of scroll in JS; that's a bit weird.
• This would be very useful for scrollable navigations for instance. Usually in this case the currently active item in the navigation is styled in some way, and scrolled into view when getting active. Right now you have to set the style on one side, and cause the scroll on another side in JS. With this, you could just add a class to the active item, and use scroll-y: selector(.nav .active); for it to be scrolled into view whenever it changes.
• Setting the scroll values in CSS would allow to give more control over "smooth scrolling" since it could be controlled with CSS transitions. We could then control the easing function and duration of smooth scrolling.

[argyleink]

great questions and comments!

• it def should respect scroll-margin and padding, it should work similar to elements which match the #hashtag of the url
• it could be made stronger, perhaps in another proposal? my goal here is to propose as little as possible so it can move faster. i'm open to considering adding more power to it tho 👍🏻

[brunostasse]

It makes total sense to have a small proposal to get it as fast as possible. This is much needed today, so it'd be great to have it as is!

[MattWilcox]

This may be pure fantasy, but I'd like to be able to pass a selector to the scroll start so you can say "start with this element on screen". You do not know the absolute position of the element you care about all the time, especially with responsive sites the offset may be vastly different in absolute units.

scroll-start: el( .slider li:nth-child(2) );

[bramus]

In various specs there's functions being proposed for that: element(), selector(), …

There's a discussion to unify these into one, but my feeling is that this is low priority: w3c/csswg-drafts#5811

[argyleink]

this explainer was using selector() until just yesterday! hehe, but I removed it and instead added scroll-start-target as the way for an element to articulate it'd like to establish the scroll start position.

To me it looked like the concepts of element() and friends were on their way out. I mean, it was kinda wierd in that it only allowed IDs but looked/felt like querySelector. Specs that were using element() like @ScrollTimeline look to be trying to remove the use case for new selector syntax, so I followed and am trying to find a way to articulate element based scroll starts using current selector syntax.

I'm open to ideas! This new proposed property scroll-start-target needs to articulate what happens when multiple scroll children ask to be the scroll target. My gut says "the one closest to the scroll start position", but what other ways would be nice to resolve competing children articulating they want to be the scroll start target?

[MattWilcox]

Personally, I think the general idea of re-using existing concepts and syntax is always in the best interest of the author.

element() makes a lot of sense, would be re-usable in many places (conceptually), and in fact is a thing I talked about CSS needing 13yrs ago (I'd link to the blog post, but I was ... young and abrasive while pointing out "flaws" in CSS3 and that CSS being ignorant of anything outside the cascade is a fundamental limitation that makes it impossible to completely untangle styling from semantics).