Question

因此，当用户滚动到网站上的某个点时，我会触发一个滚动事件。它一直工作，直到你达到这一点并想要继续滚动，然后它将连续发射每一个滚动。我想要开火一次然后再不开火了。

    $(window).on('scroll', function() {
    var y_scroll_pos = window.pageYOffset;
    var scroll_pos_test = 450;  // set to whatever you want it to be

    if(y_scroll_pos > scroll_pos_test) {
      alert("hey you hit it");
    }
});

我在下面设置了一个演示：

JSFiddle

Answer 1

当然它会继续触发每个滚动 - 你没有删除滚动事件处理程序，如果用户继续向下滚动，if条件将继续为后续滚动事件。请注意，在用户到达页面的那一点之前，处理程序也会为每个滚动触发，因为if而没有做任何明显的事情。

“我想解雇一次，然后再不再开枪了。”

显而易见的解决方案是在不再需要时调用.off() method删除滚动处理程序：

$(window).on('scroll', function() { var y_scroll_pos = window.pageYOffset; var scroll_pos_test = 450; // set to whatever you want it to be if(y_scroll_pos > scroll_pos_test) { $(window).off('scroll'); // <--- add this alert("hey you hit it"); } });

Answer 2

您可以在满足滚动点后设置变量，仅在未设置该变量时发出警报。

 var scrolled = false;
 $(window).on('scroll', function() {
     var y_scroll_pos = window.pageYOffset;
     var scroll_pos_test = 450;  // set to whatever you want it to be
 
     if(y_scroll_pos > scroll_pos_test && !scrolled) {
       alert("hey you hit it");
       scrolled = true;
     }
 });

.scroll-text{
  Height:1000px;
  width:100px;
  background-color:Yellow; 
}

.scroll-target{
  Height:600px;
  width:100px;
  background-color:green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scroll-text">
  <p>
      Scroll Down
  </p>
</div>
<div class="scroll-target">
  <p>
      You found me!
  </p>
</div>

滚动更多时，JQuery Scroll Event会继续触发

2 个答案: