[js-snapTo()] Define which node will be selected for string arguments.
flackr opened this issue · 0 comments
flackr commented
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 ofscroll-snap-align: center none
andscroll-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.