[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を記述しなければ良い