スクロール:

scroll-snapを指定位置に設定

CSSのscroll-snap-typeを利用している場合に使用する。指定した要素番号に移動する。

Node
Nodeを指定 id値を文字列で指定してもよい
Number
移動先の要素番号を0〜の整数で渡す
String
コンテナ内のタグ名を指定 省略した場合は div を使用する
●必須引数 ●オプション引数(省略可能)

記述例

$setSnapPosition($id('nodeId'), 2)
$setSnapPosition('nodeId', 2, 'a')

動作サンプル

sample10
sample11
sample12
sample13
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;」を適用しているサンプル。

sample30
sample31
sample32
sample33
sample34
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); //上限を超えた要素番号を指定した場合は自動的に上限に移動する
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。