[JavaScript] スクロール要素表示状態チェックする方法

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

このページをシェアする

関連タグ

関連記事

[CSS] 究極のIE対策

条件付きコメント / メディアクエリを利用して IE10〜IE11 に対応する

Deprecated になった jQuery API を静的に検出する方法

モチベーション / eslint-plugin-no-jquery を導入する / 実行する

Boolean型の変数に適した命名規則

背景 / プレフィックス / どのような条件なのか分かりやすくする / 否定形を避ける / 同じ意味の単語を避ける / プロジェクトの命名規則やコーディング規約に従う / Linter で矯正する

CSS in JSとは何か

想定読者 / そもそも JS フレームワーク(React、Vue.js)を採用する理由とは何か / 「命令的 UI」 と 「宣言的 UI」 / 「命令的 UI」 VS 「宣言的 UI」 / CSS in JS とは / CSS in JS ライブラリ / Emotion の使い方 / 利用するメリット / 利用するデメ