[jQuery] 要素が画面内にスクロールインしたタイミングで処理をする
このページのタグ:[JavaScript] [jQuery]
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));
    }
上記関数にて、要素が表示範囲内に入っているかを判定します。今回のロジックでは上下方向の表示範囲のみをチェックしており、左右のスクロールについては考慮していません。

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。


ページを下にスクロールします。div枠が画面に入ります。


さらに下にスクロールします。


div枠が完全に画面内に入ると、背景色が "#c2fdff" に変わります。


さらにスクロールし、div枠の上部が表示範囲外にスクロールアウトすると、背景色が "#fff2a2" に戻ります。




参考URL

http://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling
登録日 :2016-09-28    最終更新日 :2016-09-28
このページのタグ:[JavaScript] [jQuery]
Japanese
プライバシー    iPentecについて
iPentec all rights reserverd. (ISDC)