CSSのscroll-snap-typeを利用している場合に使用する。指定した要素番号に移動する。
HTML :
<div id="sample1">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Sass :
#sample1 {
display: flex;
overflow-x: scroll;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth; //スムースなスクロール
& > div {
flex: none;
scroll-snap-align: start;
}
}
Javascript :
$setSnapPosition($id('sample1'),2);
$setSnapPosition($id('sample1'),0);
HTML :
<div id="sample2">
<a href="─">0</a>
<a href="─">1</a>
<a href="─">2</a>
<a href="─">3</a>
<a href="─">4</a>
</div>
Sass :
#sample2 {
display: flex;
overflow-x: scroll;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
& > div {
flex: none;
scroll-snap-align: center;
}
}
Javascript :
$setSnapPosition('sample2',2,'a');
$setSnapPosition('sample2',4,'a');
$setSnapPosition('sample2',0,'a');
コンテナーに「scroll-padding-top: 20px;」を適用しているサンプル。
HTML :
<div id="sample3">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Sass :
#sample3 {
display: flex;
flex-wrap: wrap;
overflow-x: hidden;
overflow-y: scroll;
scroll-snap-type: y mandatory;
scroll-padding-top: 20px; //上端から20pxの位置にスナップ
scroll-behavior: smooth;
& > div {
flex: none;
scroll-snap-align: start;
}
}
Javascript :
$setSnapPosition('sample3',2);
$setSnapPosition('sample3',4);
$setSnapPosition('sample3',0);
$setSnapPosition('sample3',8); //上限を超えた要素番号を指定した場合は自動的に上限に移動する