72

Coldfusion で開発しているサイトで無限スクロールを設定しようとしています。javascript と jquery は初めてなので、これらすべてに頭を悩ませています。無限スクロール プラグインを使用するには、自分のサイトにページネーションを設定する必要がありますか? またはページネーションなしで行う方法はありますか?

4

7 に答える 7

138

これには無限スクロール プラグインは必要ありません。スクロールがページの終わりに達したことを検出するには、jQuery を使用して次のことができます。

$(window).scroll(function () { 
   if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
      //Add something at the end of the page
   }
});

JsFiddle のデモ

于 2011-02-20T19:48:54.027 に答える
26

AJAXリクエストでフセインの答えを使用しています。10px ではなく 300px でトリガーするようにコードを変更しましたが、スクロール呼び出しが 10px 範囲よりも 300px 範囲で頻繁にトリガーされるため、AJAX 要求が完了する前に追加が増加し始めました。

これを修正するために、AJAX の読み込みが成功したときに反転するトリガーを追加しました。私のコードは次のようになります。

var scrollLoad = true;

$(window).scroll(function () { 
  if (scrollLoad && $(window).scrollTop() >= $(document).height() - $(window).height() - 300) {
    scrollLoad = false;
    //Add something at the end of the page
  }
});

次に、AJAX 応答で、に設定scrollLoadしましたtrue。

于 2013-08-06T21:33:20.097 に答える
10

Hussein の小さなサンプル here の上に構築して、jQuery ウィジェットを作成しました。追加された結果を一時的に保存する localStorage をサポートし、追加を頻繁に停止する一時停止機能があり、続行するにはクリックが必要です。

試してみる：

http://www.hawkee.com/snippet/9445/

于 2012-04-16T12:19:33.020 に答える
3 
$(function(){ 
    $(window).scroll(function(){
           if($(document).height()<=$(window).scrollTop()+$(window).height()+100){
               alert('end of page');
           }
       });
});

誰かが説明を求めたので、ここに説明があります

ここで $(document).height() --> はドキュメント全体の高さです。ほとんどの場合、これは現在のドキュメントの要素と同じです。

$(window).height() --> ウィンドウの高さ (ブラウザ) は、ブラウザで表示されているものの高さを意味します。

$(window).scrollTop()-->Element.scrollTop プロパティは、要素のコンテンツが上方向にスクロールされるピクセル数を取得または設定します。要素の scrollTop は、要素の上端からその一番上に表示されているコンテンツまでの距離の測定値です。要素コンテンツが垂直スクロールバーを生成しない場合、その scrollTop 値はデフォルトで 0 になります。

$(document).height()<=$(window).scrollTop()+$(window).height()+100

$(window).height() で $(window).scrollTop() を追加すると、結果がドキュメントの高さと等しいかどうかを確認できます。等しい場合は、最後に到達したことを意味します。ドキュメントの下部から100ピクセルの前にチェックしたいので、100も追加しています（注<=状態）

私が間違っている場合は修正してください

于 2016-03-31T13:40:55.537 に答える