ホーム エントリーへ戻る

無限スクロール

動的なコンテンツページは、魔法のようにスクロールする

無限のページは、ページの下部にトリガーするシーンを追加することで実現できる。

  1. シーン開始時にロード状態にする。複数のトリガーを防ぐために状態を保存する。 この例では、#loader要素のクラスが使用されている。
  2. 追加コンテンツを読み込むためのajax呼び出しを行う(まだ読み込み状態でない場合)。
  3. ajax "load"イベントを受け取ったら、コンテナにコンテンツを追加し、シーンを更新して元の状態に戻す。

以下のデモでは、実際にオフラインでの互換性を確保するためにajaxを使用していない。代わりに、コンテンツを追加するためにajax呼び出しを模倣する関数を使用する。

view source
LOADING...