[js-snapTo()] Define which node will be selected for string arguments.

[flackr]

snapTo accepts a string argument which can be one of next, prev, first, last, however doesn't explain what these mean. I believe that there are many complicated cases where it's not clear which is next / last or prev / first.

For example, consider the following:

<style>
.scroller {
  overflow: auto;
  width: 50px;
  height: 50px;
  position: relative;
  scroll-snap-type: both mandatory;
}

.scroller div {
  position: absolute;
  background: yellow;
  border: 5px solid black;
  scroll-snap-align: center;
}

.a {
  left: 200px;
  top: 40px;
}

.b {
  left: 40px;
  top: 200px;
}

.c {
  left: 20px;
  top: 60px;
}

.d {
  left: 80px;
  top: 20px;
}
</style>
<div class="scroller">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
  <div class="d">D</div>
</div>

What is the first snap point? Is it:

• A because A is first in DOM order?
• C because C is the nearest to the initial scroll?
• D because D is first in block order?
  Additionally, does first depend on which axis is specified? What if none of the snap points snap on both axes? (e.g. they are a mix of scroll-snap-align: center none and scroll-snap-align: none center

What is the next snap point? Next implies that it is based on the current snap point but it is possible (currently) to be snapped to one node in one axis and a different node in the other axis.