Javascript 如果滚动到每个div，则触发AJAX jQuery

如果滚动到每个div元素，我希望make

ajax

fire

• 项目分部1
• Item div 2（如果滚动到此元素，则触发ajax）
• 第3项（如果滚动到此元素，则再次激发ajax）
• 项目……N

我使用这段代码，但只有在滚动到末尾时才会触发

$（窗口）。滚动（函数（）{
if（$（窗口）.scrollTop（）==$（文档）.height（）-$（窗口）.height（））{
警报（‘火灾’）；
}
});
将滚动的像素保存在变量中。滚动时获取每个div的位置。如果滚动的像素量大于div的偏移量（与文档相关），则触发AJAX调用。
使用
$.offset（）.top
而不是heights

要检查所有部分，可以使用
$。each（）
。因为我猜您只想触发一次事件，所以需要一个变量来记住所有已经触发的部分


让firedEvents=[]；
$（窗口）。滚动（函数（）{
$（“div.section”）。每个（函数（）{
如果（！firedEvents.includes（this）&&$（window）.scrollTop（）>$（this.offset（）.top）{
推动（这个）；
警报（“火灾”+$（本）。数据（“nr”）；
}
});
});
div{
高度：500px；
}
我冒昧地编写了一个简单的html，可以满足您的需要。
在我的例子中，滚动是通过点击按钮实现的；你可以用你的用例来改变它；希望这有帮助；这是小提琴

html

js

让crossedFirstDiv=false，
crossedSecondDiv=false；
document.getElementById（'scrollButton'）。onclick=function（）{
document.getElementById（“包装器”）.scrollTop+=10；
设scrollLocation=scrollPosition（“包装器”）；
如果（scrollLocation>10&&scrollLocation 20&&scrollLocation如果您要在scroll上启动ajax调用，请确保您输入的内容使其仅启动一次，否则每次滚动时都会收到数百个请求请注意，在滚动时，这可能会每秒启动数百个ajax调用。不仅如此，因为e
$。scroll
被激发了很多次，但也是因为它将为它滚动过去的每个div激发一次。@SourceOverflow，完全正确。我尝试了，它激发了数百个AJAX。函数
让firedEvents=[]
定义名为
firedEvents
的变量并将其初始化为空数组？我可以用'var'代替'let'吗？var'和'let'有什么不同？可以。ES6引入了
let
和
const
，它们有助于防止意外结果。如果您对此感兴趣，
$(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 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>

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

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);
}