スクロール:

Nodeが現在のスクロール状態で表示されているか確認

現在のスクロール状態で、指定Nodeの各部が表示領域内にあるかどうかを確認して連想配列で返す。

Node
Nodeを指定 id値を文字列で指定してもよい
●必須引数 ●オプション引数(省略可能)

記述例

$visibleInScr($id('nodeId'))
$visibleInScr('nodeId')

戻り値

各部の表示状態(Bool値)を連想配列で返す。

result.ALLNode全体が表示領域内にある場合は true

result.OUTNode全体が表示領域外にある場合は true

result.TOPNodeの上端が表示領域内にある場合 true

result.RIGHTNodeの右端が表示領域内にある場合は true

result.BOTTOMNodeの下端が表示領域内にある場合は true

result.LEFTNodeの左端が表示領域内にある場合は true

result.XCENTERNodeが表示領域の中心(横方向)にかかっている場合は true

result.YCENTERNodeが表示領域の中心(縦方向)にかかっている場合は true

※連想配列のKeyは大文字・小文字で指定可能。ただし混在は不可。
※TOP, RIGHT, BOTTOM, LEFTは、一部でも表示領域内にあれば true となる。
例えば、矩形の左上の角が表示領域内にある場合には、TOPとLEFTが true となる。

動作サンプル

各Nodeの状態を監視するタイマーを起動してからスクロールして確認する。

OBJ 1
OBJ 2
OBJ 3
OBJ 4
OBJ 5
OBJ 6
Javascript : var resultDic1=$visibleInScr($id('obj1')); var resultDic2=$visibleInScr($id('obj2'));          :
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。