Question

如果滚动到达每个div元素，我想要激活ajax。

项目div 1
项目div 2（如果滚动到此元素，则触发ajax）
项目div 3（如果滚动到此元素，则再次激活ajax）
项目..... N

我使用此代码，但只有在滚动到结束时才会触发。

＆＃13;

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

＆＃13;

请帮忙。

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

我冒昧地写了一个简单的html来满足你的需求。在我的示例中，通过按钮单击滚动;你可以用你的用例改变它;希望这可以帮助;这里是小提琴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);
}

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

3 个答案: