web-dev-qa-db-ja.com

スクロールが80％に達したときにajaxをロードする

私はスクロールバーが下に達したときに動作する次のコードを使用しています、

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

ただし、100ではなくスクロールの70％に達したときにajaxが起動するようにします。

javascriptjqueryajaxscrollscrollbar
29
Yahoo

ページの下部までスクロールしたときに現在のチェックが実行されている場合、いくつかの基本的な算術を試すことができます。

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の例

ドキュメントの高さを測定するために％を使用することは、アイデアを読み込むたびにドキュメントの高さが増加し、ページの下部（absolute-size賢い）。

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

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

例： JSFiddle

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

85
Fabrício Matté

Googleで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

    }

});
11
Daedalus