要素が画面内にスクロールインしたタイミングで処理をする

jQueryを利用して、JavaScriptで要素が画面内にスクロールインしたタイミングで処理をするコードを紹介します。

処理の概要

要素が画面内にスクロールインしたタイミングを検出して処理を実行したい場合があります。この記事では、jQueryを利用して、要素が画面に入ったタイミングで処理するコードを紹介します。
処理の概要は、スクロールが発生するごとにイベントで、対象の枠が表示範囲内に入っているか判定し、表示範囲内に入っている場合に処理を実行します。

プログラム例

コード

下記のコードを記述します。

div-frame-inview.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <link rel="stylesheet" href="div-frame-inview.css" />
  <script type="text/javascript" src="jquery-3.1.1.js"></script>
  <meta charset="utf-8" />
  <script type="text/javascript">
    $(window).scroll(function () {
      if (isScrolledIntoView($('#frame')) == true) {
        $('#frame').css("background-color", "#c2fdff");
      } else {
        $('#frame').css("background-color", "#fff2a2");
      }
    });

    function isScrolledIntoView(elem) {
      var docViewTop = $(window).scrollTop();
      var docViewBottom = docViewTop + $(window).height();

      var elemTop = $(elem).offset().top;
      var elemBottom = elemTop + $(elem).height();

      return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
    }
  </script>
</head>
<body>
  <p class="Paragraph">aaaa</p>
  <p class="Paragraph">aaaa</p>
  <p class="Paragraph">aaaa</p>
  <p class="Paragraph">aaaa</p>
  <p class="Paragraph">aaaa</p>
  <p class="Paragraph">aaaa</p>
  <p class="Paragraph">aaaa</p>
  <p class="Paragraph">aaaa</p>
  <p class="Paragraph">aaaa</p>
  <p class="Paragraph">aaaa</p>
  <p class="Paragraph">aaaa</p>
  <div id="frame" class="divFrame">div枠</div>
  <p class="Paragraph">aaaa</p>
  <p class="Paragraph">aaaa</p>
  <p class="Paragraph">aaaa</p>
  <p class="Paragraph">aaaa</p>
  <p class="Paragraph">aaaa</p>
  <p class="Paragraph">aaaa</p>
  <p class="Paragraph">aaaa</p>
  <p class="Paragraph">aaaa</p>
  <p class="Paragraph">aaaa</p>
  <p class="Paragraph">aaaa</p>
  <p class="Paragraph">aaaa</p>
  <p class="Paragraph">aaaa</p>
</body>
</html>

div-frame-inview.css

.Paragraph{
  font-size:22px;
  margin-top:16px;
  margin-bottom:16px;
}

.divFrame {
  width:100%;
  height:240px;
  background-color:#fff2a2;
  border:solid 1px #ff6a00;
}

解説

    $(window).scroll(function () {
      if (isScrolledIntoView($('#frame')) == true) {
        $('#frame').css("background-color", "#c2fdff");
      } else {
        $('#frame').css("background-color", "#fff2a2");
      }
    });

上記のコードの

    $(window).scroll(function () {

    });

がスクロールごとにイベントが発生する関数(onScroll)です。画面がスクロールされるたびに呼び出されます。

  if (isScrolledIntoView($('#frame')) == true) {
    $('#frame').css("background-color", "#c2fdff");
  } else {
    $('#frame').css("background-color", "#fff2a2");
  }

イベント内では、上記のコードを処理します。isScrolledIntoView() 関数で要素が表示範囲内に入っているかを確認します。表示範囲内に入っていれば、背景色を #c2fdff に変更し、表示範囲内に入っていなければ、背景色を #fff2a2 に変更します。

    function isScrolledIntoView(elem) {
      var docViewTop = $(window).scrollTop();
      var docViewBottom = docViewTop + $(window).height();

      var elemTop = $(elem).offset().top;
      var elemBottom = elemTop + $(elem).height();

      return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
    }

上記関数にて、要素が表示範囲内に入っているかを判定します。今回のロジックでは上下方向の表示範囲のみをチェックしており、左右のスクロールについては考慮していません。