Nodeに対して「overflow-x: scroll / overflow-y: scroll」を利用してカルーセルを実装している際に使用する。現在のスクロールコンテナの状態で完全に見えている要素の情報を取得。見えている最初の要素番号、見えている要素の数、スクロールコンテナ内の全要素数を配列で返す。
配列[0]:見えている最初の要素番号
配列[1]:見えている要素の数
配列[2]:スクロールコンテナ内の全要素数
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 {
scroll-snap-align: start;
}
}
Javascript :
var itemNum=$getCarouselVisible($id('sample1'))[0];
var itemLength=$getCarouselVisible('sample1')[1];
var itemTotal=$getCarouselVisible('sample1')[2];
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;
flex-wrap: wrap;
overflow-x: hidden;
overflow-y: scroll;
}
Javascript :
var itemNum=$getCarouselVisible($id('sample2'),'a')[0];
var itemLength=$getCarouselVisible('sample2','a')[1];
var itemTotal=$getCarouselVisible('sample2','a')[2];