snapTo()

[argyleink]

Context: explainer

Questions?
Thoughts?
Naming fine?
Risks?

[majido]

I wonder if this should simply be a new argument to existing scrollBy() and scrollTo(). Those already consider snapping into consideration but perhaps you can make it explicit.

Here is a strawman proposal:

// basic
container.scrollTo({
  left: 'snap-next',
})

// control animation
container.scrollTo({
  left: 'snap-next',
  behavior: 'smooth'
})

// 2d case
container.scrollTo({
  left: 'snap-first',
  top: 'snap-first',
  behavior: 'instant'
})

For an element case you can even use scrollIntoView() with a new snap alignment.

scrollSnapContainer.querySelector('.child-2').scrollIntoView({
  block: 'snap',
  behavior: 'smooth'
})

BTW, something to keep in mind when defining 'previous' and 'next' is that it is possible to have multiple overlapping snap positions coming from different elements.

[argyleink]

This is a great suggestion! totally fits the relative scrollTo intent and can leverage the scrollOptions object yeah! will work on an explainer like that as a better option 👍🏻

[argyleink]

started it here https://github.com/argyleink/ScrollSnapExplainers/blob/main/js-scrollTo()_Snap-Additions/explainer.md