スクロール：
scroll-snapの現在地を取得
CSSのscroll-snap-typeを利用している場合に使用する。スナップしている要素番号を返す。
Node
Nodeを指定 id値を文字列で指定してもよい
String
コンテナ内のタグ名を指定 省略した場合は div を使用する
●必須引数 ●オプション引数(省略可能)
記述例
$getSnapPosition($id('nodeId'))
$getSnapPosition('nodeId', 'a')
戻り値
指定したNodeの子Nodeを配列要素として扱い、スナップしている配列番号を返す。
動作サンプル
sample10
sample11
sample12
sample13
sample14
sample15
HTML :
<div id="sample1">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
Sass :
#sample1 {
display: flex;
overflow-x: scroll;
overflow-y: hidden;
scroll-snap-type: x mandatory;
& > div {
flex: none;
scroll-snap-align: start;
}
}
Javascript :
var snapPos=$getSnapPosition($id('sample1'));
HTML :
<div id="sample2">
<a href="─">0</a>
<a href="─">1</a>
<a href="─">2</a>
<a href="─">3</a>
<a href="─">4</a>
<a href="─">5</a>
</div>
Sass :
#sample2 {
display: flex;
overflow-x: scroll;
overflow-y: hidden;
scroll-snap-type: x mandatory;
& > div {
flex: none;
scroll-snap-align: center;
}
}
Javascript :
var snapPos=$getSnapPosition('sample2','a');
コンテナーに「scroll-padding-top: 20px;」を適用しているサンプル。
sample30
sample31
sample32
sample33
sample34
sample35
HTML :
<div id="sample3">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</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の位置にスナップ
& > div {
flex: none;
scroll-snap-align: start;
}
}
Javascript :
var snapPos=$getSnapPosition('sample3');
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。