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

2 min read

概要

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

モダンブラウザであれば、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を記述しなければ良い

Next Read

CSS in JSとは何か

想定読者 / そもそも JS フレームワーク(React、Vue.js)を採用する理由とは何か / 「命令的 UI」 と 「宣言的 UI」 / 「命令的 UI」 VS 「宣言的 UI」 / CSS in JS とは / CSS in JS ライブラリ / Emotion の使い方 / 利用するメリット / 利用するデメリット / 関連 / <h2 id="footnote-label" class="sr-only">Footnotes

[CSS in JS] 外部のリセットCSSを使う方法

目的 / 課題 / おまけ

竈門炭治郎をCSS Paint APIで再現する

概要 / 完成品 / 実装方法 / 〆 / 参考

BudouXでOGP画像のテキストを読みやすくしてみた

背景 / BudouX とは / 方法 / 改善結果 / おわりに