0

ハードコーディングされたdivからフィードする無限（半無限）スクロールを作成しようとしています（バックエンド言語をまだ知らないため）。私の調査では、無限スクロール用の優れた jQuery が大量に見つかりましたが、それらはすべて、ハードコードされたコンテンツではなく、データベースで使用するためのものです。

私が最終的に達成しようとしているのは、X div を DOM にロードすることから始まり、ユーザーがページの下部に到達すると、さらに X div をロードし、ロードする div がなくなるまで繰り返す無限スクロールです。 .

良いスクリプトや関連するスクリプト、または私に役立つ可能性のあるフィドルを知っている人はいますか? 私の問題の一部は、私がまだ JS の学習曲線にいることです。スクリプトを見れば何が起こっているのか理解できることはよくありますが、自分でスクリプトをゼロから作成するのは依然として困難です。

どんな助けや指示も大歓迎です。前もって感謝します！！

4

2 に答える 2

0

HTML はどこかに保存する必要があり、無限スクロールを考えるのに十分な HTML がある場合、おそらく最初のリクエストですべてをロードしたくないでしょう。そのため、各「投稿」が Web サイト上の個別の HTML ファイルに保存されているとしましょう。サーバー: /posts/1.html。そして、それらをメイン ドキュメントの div に追加します<div id="posts"></div>。

特定の投稿をダウンロードして div に追加するメソッドが必要です。

function loadPost (id) {
  $.get('/posts/'+id+'.html').done(function (html) {
    $('#posts').append(html);
  });
}

loadPost()次に、ページの一番下までスクロールしたときにトリガーする方法が必要です。この例では、jQuery ウェイポイントを使用して、div の下部が表示されたときにハンドラー関数を呼び出します。

var currentPost = 1;

$('#posts').waypoint({
  offset: 'bottom-in-view',
  handler: function () {
    loadPost(currentPost++);
  }
});
于 2013-08-26T23:31:33.780 に答える