30

スクロールバーが一番下に達したときに機能する次のコードを使用しています。

if($(window).scrollTop() == $(document).height() - $(window).height()){

ただし、スクロールの 100% ではなく 70% に達したときに ajax が起動されるようにしたいと考えています。

4

2 に答える 2

92

ページの一番下までスクロールしたときに現在のチェックが起動している場合は、いくつかの基本的な計算を試すことができます。

if ($(window).scrollTop() >= ($(document).height() - $(window).height())*0.7){
                                          //where 0.7 corresponds to 70% --^

まだ行っていない場合は、複数の同時 Ajax リクエストを起動しないようにチェックを追加してください。

これは質問の範囲外ですが、複数のリクエストが同時に発生するのを防ぐ方法の例が必要な場合:

グローバル変数を宣言しprocessingます。

次に、それを関数に組み込みます。

if (processing)
    return false;

if ($(window).scrollTop() >= ($(document).height() - $(window).height())*0.7){
    processing = true; //sets a processing AJAX request flag
    $.post("url", '<params>', function(data){ //or $.ajax, $.get, $.load etc.
        //load the content to your div
        processing = false; //resets the ajax flag once the callback concludes
    });
}

これは、スクロール機能に対するアクティブな Ajax リクエストがあるかどうかを追跡するために var を使用する簡単な例であり、他の同時実行中の Ajax リクエストに干渉することはありません。

編集：JSFiddleの例

ドキュメントの高さを測定するために % を使用することは、何かをロードするたびにドキュメントの高さが増加し、Ajax リクエストがページの下部 (絶対サイズ賢い）。

それを防ぐために、固定値のオフセットを使用することをお勧めします（200〜700程度）：

if ($(window).scrollTop() >= $(document).height() - $(window).height() - 700){
                                 // pixels offset from screen bottom   --^

例: JSFiddle

編集:パーセンテージを使用して最初のコードで問題を再現するには、50div秒をロードします。次の を読み込むと、divドキュメントの高さの合計に 2% しか追加されません。つまり、この 2% をスクロールしてドキュメントの高さの 70% に戻すとすぐに、次のリクエストがトリガーされます。私の修正された例では、定義された下部オフセットは、ユーザーが画面の下部から定義された絶対ピクセル範囲にいる場合にのみ、新しいコンテンツをロードします。

于 2012-05-19T05:27:24.300 に答える
15

get percentage scrolled downグーグルで簡単に検索すると、最初の結果としてこのページが表示されます（以下のコードで、多かれ少なかれあなたが望むことをします）。ここで質問する前に調査を試みなかったように感じます。

$(document).scroll(function(e){

    // grab the scroll amount and the window height
    var scrollAmount = $(window).scrollTop();
    var documentHeight = $(document).height();

    // calculate the percentage the user has scrolled down the page
    var scrollPercent = (scrollAmount / documentHeight) * 100;

    if(scrollPercent > 50) {
        // run a function called doSomething
       doSomething();
    }

    function doSomething() { 

        // do something when a user gets 50% of the way down my page

    }

});
于 2012-05-19T05:26:53.893 に答える