[css-scroll-snap] Programmatically scroll to snap points

[SebastianZ]

@Schepp mentioned in #156 that he'd like to have a way to programmatically scroll to a certain snap point.

There are indeed use cases in which authors may want more explicit control over the scroll position when scrolling with a scroll container. E.g. scrolling to a specific image in a gallery.

A possible solution for that would be to reuse the scrollTo() function for that. Its ScrollToOptions dictionary could be extended by a new option indicating a snap point.

Sebastian

[johannesodland]

This would be really useful 👍🏻

At the moment we have to infer the position of the snap points, which is somewhat cumbersome. It involves getting the following values:

• the used ‘scroll-snap-align’ of the elements
• offsetWidth/offsetHeight of the elements
• the used ‘scroll-padding’ of the container
• the offsetWidth/offsetHeight of the scroll container. We also have to take into account that some snap points might be unreachable.

[fantasai]

@johannesodland The various scrolling functions are supposed to honor the snap positions of the elements they're scrolling to, taking into account scroll-padding, scroll-margin, and scroll-snap-align. Why wouldn't that solve the use case here?

[johannesodland]

@fantasai You're right. scrollIntoView() with the block and inline options would get you close here. I still think you have to retrieve and parse the computed scroll-snap-align property of the element to figure out which options you should call scrollIntoView() with?

Maybe a new value for ScrollLogicalPosition could make this more ergonomic?

element.scrollIntoView({block: 'snap'})