スクロールするとAJAX jQueryが発生する

Question

各div要素にスクロールすると、ajaxを作成します。

• 項目DIV 1件の
• 商品DIV 2（火AJAXこの要素にスクロールする場合）
• 商品DIV 3（再び火AJAXこの要素にスクロールする場合）
• アイテム..... N

私はこのコードを使用しますが、最後までスクロールするだけで起動します。

$(window).scroll(function() { 
 
    \t if($(window).scrollTop() == $(document).height() - $(window).height()) { 
 
    \t \t alert('Fire!'); 
 
    \t } 
 
    });

助けてください。

Answer 1

高さの代わりに$.offset().topを使用してください。

すべてのセクションを確認するには、$.each()を使用します。私はイベントを一度だけ実行したいと思っているので、すでに起動しているすべてのセクションを覚えておく必要があります。

let firedEvents = []; 
 

 
$(window).scroll(function() { 
 
    $("div.section").each(function() { 
 
    if (!firedEvents.includes(this) && $(window).scrollTop() > $(this).offset().top) { 
 
     firedEvents.push(this); 
 
     alert("fire " + $(this).data("nr")); 
 
    } 
 
    }); 
 
});

div { 
 
    height: 500px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="section" data-nr="0" style="background-color: red;"></div> 
 
<div class="section" data-nr="1" style="background-color: green;"></div> 
 
<div class="section" data-nr="2" style="background-color: blue;"></div> 
 
<div class="section" data-nr="3" style="background-color: yellow;"></div>

Answer 2

$(window).scroll(function() { 
    var scrolled = $(window).scrollTop(); 

    $('div:not(.fired)').each(function() { 
     var position_of_div = $(this).offset(); 
     if (scrolled > position_of_div.top) { 
      $(this).addClass('fired'); 
      alert('fire'); 
     } 
    }); 
}); 

変数にスクロールしたピクセルを保存します。スクロールで各divの位置を取得します。スクロールされるピクセルの量が（ドキュメントに関連する）divのオフセットより大きい場合、AJAX呼び出しを起動します。

Answer 3

私はあなたのニーズをfullfilます簡単なHTMLを書くの自由を取りました。 私の例では、スクロールはボタンをクリックすることで起こります。あなたのユースケースでそれを変えることができます。お役に立てれば;あなたはあなたが作ることを何かに入れて確認してスクロールのAJAX呼び出しを発射しようとしている場合は、ここでフィドルhttps://jsfiddle.net/39z82axt/

HTML

<div id="wrapper"> 
<div class="divel">Element 1</div> 
<div class="divel">Element 2</div> 
<div class="divel">Element 3</div> 
<div class="divel">Element 4</div> 
<div class="divel">Element 5</div> 
</div> 
<button id="scrollButton"> 
Click to Scroll 
</button> 

CSS

.divel { 
    height:80px; 
} 
#wrapper { 
    height: 100px; 
    overflow:scroll; 
} 

JS

let crossedFirstDiv = false, 
    crossedSecondDiv = false; 

document.getElementById('scrollButton').onclick = function() { 
    document.getElementById("wrapper").scrollTop += 10; 
    let scrollLocation = scrollPosition("wrapper"); 
    if (scrollLocation > 10 && scrollLocation <20 && crossedFirstDiv == false) { 
    alert("crossing div 1"); 
    crossedFirstDiv = true; 
    } 
    else if (scrollLocation > 20 && scrollLocation <30 && crossedSecondDiv == false) { 
    crossedSecondDiv = true; 
    alert("crossing div 2"); 
    } 

    // and so on.. 
} 

function scrollPosition(elementId) { 
    let a = document.getElementById(elementId).scrollTop; 
    let b = document.getElementById(elementId).scrollHeight - document.getElementById(elementId).clientHeight; 
    let c = a/b; 
    return Math.floor(c * 100); 
}