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

このページをシェアする

Related Articles

[ESLint] 特定のimportにおいてパスの末尾スラッシュを禁止する方法

背景 / やりたいこと / @typescript-eslint/no-restricted-imports を利用した / 余談(末尾のスラッシュ自体を禁止にする)

`<input type="range">`のstepを可変にする方法

仕様 / 完成デモ / 実装 / 参考

[Vite] CSSだけをビルドする方法

背景 / Vite をインストール / 仕様

CSS in JSとは何か

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

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

目的 / 課題 / おまけ