要素が表示されたら、で有名な jQuery inview.js。visiblePartYは今返さないよ

今回は珍しく技術ネタです。

ページをスクロールして、対象の要素が画面内に表示されたら○○をしたい！という欲求がある時によく使うのが jQuery inview.js（GitHub）ですが、要素が「表示されたら」という状態を判定する引数が、最新バージョンで変わっていることに注意しないといけません。

まず、古い紹介記事によくあるコード。

$('.box').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
	if (isInView) {
		if (visiblePartY == 'both') {
			$(this).stop().animate({opacity:1}, 300);
		}
	}
	else {
		$(this).stop().animate({opacity: 0}, 300);
	}
});

注目すべきは、visiblePartXとvisiblePartYです。

それが、最近のバージョンでは返さないのです。

よって、visiblePartYを参照するコードを書いているとエラーになりまする。

だからisInViewのみで判定するコードに修正する必要があります。

将来は復活するのかもしれませんが分かりません。また、最新バージョンはバグが修正されているようなので、最新バージョンを採用したいです。

で、これだと困ることがあります。

最近、video要素が表示されたら、動画を自動再生するように意図したのですが、動画が画面内に少しでも入ったら当然再生されます。スクロールを続ければ気にならないのですが、複数動画が並ぶようなレイアウトの場合、視線が行っていない動画まで再生されてしまうところに煩わしさを感じてしまいます。

だから、完全に動画要素が表示されたらとか、７割ぐらい表示されたらとか、工夫したいところです。

そんな時にどうするか？

簡単です。video要素にinviewをかけるのではなくて、自動再生したい位置に設置した見えない要素にinviewをかければいいのです。

見えない要素を上下50％の位置におけば半分表示されたら再生するし、動画下端に置いたら完全に表示されたら再生という風にできますよ。

参考になったら幸いです。ではでは。