スクロール：
オブジェクト内の指定Nodeまでスクロール
CSSのoverflowがスクロール可能に設定されているオブジェクト内の指定したNodeまでスクロールさせる。
Node
Nodeを指定 id値を文字列で指定してもよい
Number
スクロールバックの値を指定
0以上の整数で指定 ・「vw」付きの文字列で指定 ／ PC用とスマホ用として両方を配列に入れて渡すことも可能
0以上の整数で指定 ・「vw」付きの文字列で指定 ／ PC用とスマホ用として両方を配列に入れて渡すことも可能
String
対象Nodeを合わせる位置を指定 省略した場合は start となる
start = 左合わせ(縦の場合は上) ・ center = 中央合わせ ・ end = 右合わせ(縦の場合は下)
start = 左合わせ(縦の場合は上) ・ center = 中央合わせ ・ end = 右合わせ(縦の場合は下)
●必須引数 ●オプション引数(省略可能)
記述例
$scrToNodeInObj($id('nodeId'), 0)
$scrToNodeInObj($id('nodeId'), new Array(15,'4vw'))
$scrToNodeInObj('nodeId', new Array(30, '8vw'), 'end')
注意点
スクロール方向の判別は、CSSのoverflowの設定を見て行うため、スクロールさせるオブジェクトには「overflow-x」と「overflow-y」を明示的に設定する必要がある。
※この2つを一括で指定する「overflow: auto;」は不可。どちらかは「hidden」に設定すること。
スクロールバックの値にPC用(px)とスマホ用(vw)を渡した場合、スマホかどうかの判定は、klib独自変数の cellPhone で行っているので、実機で動作確認をする必要がある。
なお、PC上で動作確認をしたい場合は、klib.jsを読み込んだあとにJavascriptで一時的に「cellPhone = true」として上書きすることで可能となる。
スクロールさせるNodeにはCSSで「position: relative;」を設定する。スクロールNode内での、対象Nodeの位置関係を取得するために必要。
動作サンプル
シンプルな囲い構造のスクロール内にあるNodeを対象とするサンプル。
BOX
BOX
TARGET BOX
BOX
BOX
HTML :
<div id="sample1">
<div>BOX</div>
<div>BOX</div>
<div id="target_box">TARGET BOX</div>
<div>BOX</div>
<div>BOX</div>
</div>
Sass :
#sample1 {
position: relative;
display: flex;
width: 600px;
overflow-x: scroll;
overflow-y: hidden;
& > div {
flex: none;
width: 250px;
}
}
Javascript :
$scrToNodeInObj($id('target_box'),0);
$scrToNodeInObj($id('target_box'),0,'center');
$scrToNodeInObj($id('target_box'),new Array(40,'5vw'),'end');
複数層の囲いの中にあるNodeを対象とする。内部のNodeにはCSSでmarginも設定されている例。
BOX
BOX
TARGET 1
BOX
BOX
TARGET 2
HTML :
<div id="sample2">
<div>
<div>BOX</div>
<div>BOX</div>
<div id="target_1">TARGET 1</div>
<div>BOX</div>
<div>BOX</div>
<div id="target_2">TARGET 2</div>
</div>
</div>
Sass :
#sample2 {
position: relative;
width: 250px;
overflow-x: hidden;
overflow-y: scroll;
& > div {
display: flex;
flex-wrap: wrap;
& > div {
flex: none;
width: 250px;
margin: 30px 0 0;
}
}
}
Javascript :
$scrToNodeInObj($id('target_1'),0);
$scrToNodeInObj($id('target_1'),new Array(30,'5vw'));
$scrToNodeInObj($id('target_1'),0,'center');
$scrToNodeInObj($id('target_1'),0,'end');
$scrToNodeInObj($id('target_2'),50,'end');
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。