Question

我对JavaScript很陌生，发现自己有点卡在一个看似超级简单的onScroll函数上。

我有以下代码（见下文），效果很好。但是，它会在用户每次向上或向下滚动时触发，返回到页面上的特定垂直位置。我只希望它在页面加载后第一次滚动到它时触发。

请帮忙！

非常尊重，并提前多多感谢！

$(window).scroll(function () {
  $('#pro1').each(function () {
     var topOfWindow = $(window).scrollTop(),
     bottomOfWindow = topOfWindow + $(window).height();

     var imagePos = $(this).offset().top;

     if(imagePos < bottomOfWindow-200 && imagePos >= topOfWindow-500){
       $(this).addClass('bigEntrance2'); 
     }else{
       $(this).removeClass('bigEntrance2');
     }
  });
});

Answer 1

您可以使用one方法。它与on方法相同，但每页加载仅触发一次。所以对于你的例子，它看起来像这样：

$(window).one("scroll", function()
{
  # Scroll code here
});

编辑：我想我更了解你的问题。您希望代码在您处于该滚动区域时检查，但只执行一次。所以要做到这一点，首先应该指定一个自定义事件：

$(window).one("customEvent", function()
{
  $(this).addClass('bigEntrance2');
});

然后在您需要时触发该事件：

if(imagePos < bottomOfWindow-200 && imagePos >= topOfWindow-500)
{
  $(this).trigger("customEvent");
}

这样，类'bigEntrance2'只应用一次，这就是我想你想要的。

Answer 2

您可以使用变量并将其用作标志。用户第一次在页面加载时滚动，您将其设置为true。之后，检查该变量以避免始终使用相同的代码。

var alreadyScrolled = false;
$(window).scroll(function () {
     if(!alreadyScrolled) {
          $('#pro1').each(function () {
               var topOfWindow = $(window).scrollTop(),
               bottomOfWindow = topOfWindow + $(window).height();

               var imagePos = $(this).offset().top;

               if(imagePos < bottomOfWindow-200 && imagePos >= topOfWindow-500){
                    $(this).addClass('bigEntrance2'); 
               }else{
                    $(this).removeClass('bigEntrance2');
               }
          });
          alreadyScrolled = true;
     }
});

无法获取onScroll功能只能触发一次

2 个答案: