YUIを使ってContinuous Pagination

Continuous Paginationというのは、AutoPagerizeを 使ってGoogleの検索結果などを見たときのように、ページをスクロールしていくと自動的に次のページの内容を 読み込む仕組み。TumblrのPreferenceでdashboadのオプションにあるEndless Scrollというのもそう。 Continuous Paginationという言葉にこれと言った日本語訳は見つからなかった。

Switch On The Codeの2008年の5月頃に書かれた記事にやり方が書いてあったので、 自分でも試しに作ってみた。

やってる事は、

1. スクロールイベントが発生したときに、スクロール位置をチェック
2. 一定の位置までスクロールされていたら、次のページのコンテンツやデータを取得して、ページの末尾に追加

どのタイミングで読み込むかは、ページの長さとウィンドウやフレームのサイズによって異なってくる。 ページの一番下まで来たときに次のコンテンツを読み込む場合は、例えば

スクロール量 > ページの高さ - ウィンドウの高さ - オフセット

の時に読み込む処理を行う。

Yahoo! UI Libraryだと、Dom Collection にそれぞれの値を取得するmethodがあるので、次のようになる。

var dom = YAHOO.util.Dom;

var continuousPaginator = function(){
    var offset    = 10;
    var scrtop    = dom.getDocumentScrollTop();
    var docheight = dom.getDocumentHeight();
    var winheight = dom.getViewportHeight();

    if ( scrtop < docheight - winheight - offset) {
        // 次のコンテンツを読み込んで表示する処理
    }
};

YAHOO.util.Event.addListener(window, "scroll", continuousPaginator);

以前書いた、パンくずリスト + ナビゲーションメニューの デモとして作った Tiny Shopping Browser に この機能を付けた(今後はもう少しきれいなコードにしていきたい)。

2009/12/27 追記: Tiny Shopping Browser ではなくて Simple Shopping Search という名前に変えた。