10

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

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

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

ちなみに、今私はYUI Datatableを使用しています

4

7 に答える 7

4

回答ありがとうございます。これは私の最終的な作業コード (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 コンポーネントとの完全な統合を実現することです :)

于 2008-10-19T17:26:12.237 に答える
2

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

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

scrollTop は本質的に「スクロールされたピクセル数」です。これを作業中のテーブルに適用すると、うまくいくと思います。

于 2008-10-19T16:23:50.350 に答える
2

Google で検索したところ、Ajax、JavaScript、および XML を使用したダイナミック スクロールの実装という記事が見つかりました。丁寧な説明のようです。

于 2008-10-19T16:50:20.687 に答える
1

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

于 2010-07-22T21:36:23.480 に答える
0

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

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

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

3）目の不自由な人や、JavaScriptを無効にしてWebを閲覧している人のために、実用的なフォールバックを提供しています（ねえ、また長いテーブルがあります）。

于 2008-10-19T22:58:34.420 に答える
0

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

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

于 2008-11-12T11:53:12.560 に答える
0

今日 Firebug で DOM プロパティを読んでいるときに気づいたプロパティがありますscrollY(Firebug では、DOM タブの下にあるcontent>に移動しますscrollY)。これは、ウィンドウでスクロールするために残っているピクセルの量のようです。これがスクロール可能な要素に対しても作成されているかどうかを確認してください。次に、Yuval の関数を使用して新しいデータをロードできます。

于 2008-10-19T16:28:20.387 に答える