jQuery:要素が画面に現れたらイベントを発生させる

たとえば縦長の画面をスクロールして、ある特定の要素が画面に入ったときにイベントを発生させたいときには、jQueryプラグインのjquery.inviewを使うと便利です。

サンプル

<meta charset="utf-8">

<div style="min-height: 2000px; background-color: green;"></div>
<div id="targetPane">targetPane: Is this in the viewport?</div>
<div style="min-height: 2000px; background-color: green;"></div>

<script type="text/javascript" src="jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="jquery.inview.min.js"></script>
<script>

$('#targetPane').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
  if (isInView) {
    alert("targetPane is in the viewport");
  } else {
    // element has gone out of viewport
  }
});

</script>

これだけです。
#targetPane の上下に高さ2000pxのDIV要素を置き、わざとスクロールが発生するような画面にしています。画面をスクロールして #targetPane が画面内に入ってくるとアラートが発生します。

Twitterの公式サイトでも画面の一番下までスクロールされたタイミングでツイートが読み込まれたりしますね。これは3G回線のような低速なモバイル通信で無駄な通信を避けることができるというメリットがあります。スマホ利用を意識した最近のWebアプリではわりとよく使われるテクニックです。