ツイッターやフェイスブックのタイムラインで、スクロールするごとに、過去の投稿が追加されます。そうすることで、最初の読み込みを少なくし、訪問時の待ち時間を軽減することが出来ます。今回は、そんな無限スクロールの仕組みを解説します。

サンプルを見る

スクロールが一番下に行ったことを検知する。

サンプルでは、スクロールが下から100ピクセルの位置までスクロールすると、次の数字を加算して追加しています。まずは、このスクロールの下位置の検出をしましょう。

$(window).on("scroll" , function(e)
{
    var bottomPos = 100;

    var scrollHeight = $(document).height();
    var scrollPosition = $(window).height() + $(window).scrollTop();

    //スクロールが下に行った時の処理
    if (scrollPosition > scrollHeight - bottomPos)
    {
        appendFunc();
    }
});

スクロールイベントハンドラ内で上記処理を実行します。処理内容としては、ドキュメント全体の高さと、スクロール位置、ウインドウの高さを足した数を比べて、スクロールの下位置を検出します。キュメント全体の高さと、スクロール位置、ウインドウの高さの関係は、下の図を参考にしてください。

scrollTop()の値は、スクロールバーを一番に持って行っても、ウインドウの高さが分があるため、そのままではドキュメントの高さと比べられません。ですので、スクロール位置とウインドウの高さを足してあげるのです。

なお、bottomPosとして100を引いているのは、 スクロール位置とウインドウの高さだけだと、ブラウザによっては多少の誤差が発生し、ドキュメントの高さと同一にならない可能性を考慮するのと、一番下まで行って読み込みを開始するよりは、ユーザーが読んでいる途中で読み込みを開始した方が待ちが無くなるためです。

では次に、コンテンツを下に追加する処理です。

//ボタン表示フラグ
var counter = 1;

function appendFunc()
{
    counter++;
    var tagText = "";

    for(var i = 0 ; i < 20 ; i++)
    {
        tagText += counter + "<br>";
    }

    $("#wrap").append(tagText);
}

ここでは、簡単に数値を加算して、for文により20個追加しています。HTMLに新しく要素を追加するときは、「appendメソッド」を使います。

「appendメソッド」で追加する要素は、jQueryオブジェクトでも構いませんし、タグをそのままString型の変数として指定しても構いません。あとはここで「append」するものを、articleとかdivにしてしまえば、例えば、ニュースなどの新着情報を無限スクロールにしたりできます。

次回は、外部データを読み込む無限スクロールを作ってみましょう。

河野　義貴
インハウスのFlashクリエイターとして勤務後、2010年独立。一年間のフリーランス期間を経て、2011年9月にスウィーツアンドストリーム株式会社を設立。主にFlash・HTML5を駆使した、PC・スマートフォン向けインタラクティブコンテンツを中心に活動中。マイナビクリエイターセミナーの講師としてもおなじみ。