＆＃8220;無限スクロール＆＃8221; HTMLテーブルでの効果[終了]

StackOverflow https://stackoverflow.com/questions/216588

質問

スクロールしたデータテーブルをWebページに表示しています。このテーブルには数千の動的な行があるため、サーバーから（AJAX経由で）ロードされます。

ユーザーは上下にスクロールできるので、ユーザーがスクロールバーの最後に到達したとき（つまり、テーブルの一番下の最後の行）を順番に検出する必要がありますより多くのデータをリクエストして表示します。

Googleリーダーでこの効果を見つけることができます。特定のフィードの最後の投稿までスクロールすると、Googleがリクエストを送信し、新しい投稿を透過的に表示しますが、どのように達成できるかわかりません。

ところで、今は YUI Datatable

を使用しています。
役に立ちましたか？

解決

ご回答ありがとうございます。それが私の最終的な作業コードです（Gregと ajaxian.com に触発された） 、いくつかのjQuery関数を使用し、 YUI DataTable で動作します。

$(".yui-dt-bd").scroll(load_more);

function load_more() {              
    if ($(this).scrollend()) {
        alert("SCROLL END REACHED !");
        // TODO load more data
    }
}

$.fn.scrollend = function() {
    return this[0].scrollHeight - this[0].scrollTop - this.height() <= 0;
}

次のステップは、独自の YUI Paginator を実装して完全な統合を実現することです。 YUIコンポーネント：）

他のヒント

私はあなたが使用している特定の要素に精通していませんが、順番に  これをフルサイズのウィンドウに実装するには、次を実行できます。

$wnd.onscroll = function() {
    if (($wnd.height - $wnd.scrollTop) < SOME_MARGIN) then doSomething();
};

scrollTopは、本質的に「スクロールされたピクセル数」です。 作業しているテーブルにこれを適用すると、仕事ができると思います。

Googleで検索して次の記事を見つけました： Ajaxで動的スクロールを実装する、JavaScript、XML 。完全な説明のように見えます。

こちら YUIのみが動作することを確認できます。上記の解決策の1つとは対照的に、スクロールバーは継続的に移動し、位置とサイズは表示可能領域の実際のサイズと位置を反映し、スクロールバーが最下部に達すると次のバッチをロードしません。スクロールバーは、レコード全体の最後が表示領域の最下部にある場合にのみ最下部に到達します。もちろん、これはレコードの数がわかっている場合にのみ機能します。

FirebugのDOMプロパティを読んでいるときに気付いた scrollY というプロパティがあります（Firebugの[DOM]タブにある content ＆gt; scrollY ）は、ウィンドウをスクロールするために残っているピクセルの量のように見えます。これがスクロール可能な要素にも作成されているかどうかを確認してください。次に、Yuvalの関数を使用して新しいデータをロードできます。

ええ。無限スクロールの大ファンではありません。これは、Webがどのように機能するかについて人々が行う重要な仮定の一部を破ります。次の条件でのみ実装することを約束してください。

1）すべてを素敵な長いテーブルにロードし、ユーザーがCtrl-Fを使用してフリンジが現れる時間をページ内で検索できる完全に優れたページに置き換えるのではありません。

2）スクロールデータの各チャンクの下部に広告を挿入する予定はありません。

3）盲目の人やJavaScriptを無効にしてWebを閲覧している人に、実用的なフォールバックを提供しています（ちょっと、また長いテーブルがあります）。

YUIを使用している場合、があります。 tableScrollEvent は、テーブルがスクロールするときに発生します。これをdataTableのgenerateRequest関数と組み合わせると、 tableScrollEvent およびデータセットの終わりに近づいたときにリクエストを開始します。

YUIドキュメントにはこのケースの具体的な例はありませんが、が表示されます。 generateRequestによって返されたデータの処理方法

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top