[JavaScript] スクロールで要素が表示された状態をチェックする方法

概要

ある指定の要素が、スクロールで表示された場合にイベントを発生させる。
(ロード時に表示されていた場合は、スクロールイベントが発生しないとイベントが発生しないので注意)

モダンブラウザであれば、Intersection Observerを用いる方法がベストだと思うが、IE11などでも動作させる必要がある場合は以下の方法が有効である。

コード

var target = document.getElementById('hoge');
scrollInViewElement(target);

function scrollInViewElement(target) {
  var scrollIn = function(event) {
    var targetTop = target.getBoundingClientRect().top;
    var targetBottom = target.getBoundingClientRect().bottom;
    if (0 < targetTop && targetBottom <= window.innerHeight) {
      console.log('表示された!');  // 実行したいイベント
      window.removeEventListener('scroll', scrollIn, false);
    }
  };
  window.addEventListener('scroll', scrollIn, false);
}
  • #hogeを監視する
  • removeEventListenerをして過度なイベント発生を防いでいるが、逆に何度もイベントを発生させる必要があればremoveEventListenerを記述しなければ良い