Javascript 仅为视图中的元素添加类

我一直在寻找类似的影响，我正在寻找触发启动与页面滚动动画的东西

在StackOverFlow中，有些人用以下代码帮助我：

function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

$(window).scroll(function(){

    if (isScrolledIntoView('.class') === true) {
        $('.class').addClass('in-view')
    }
});

结果可在此处找到：

但现在我有另一个问题。我有一个包含多个div的页面，我想设置所有div的动画，但是如果我使用.class设置每个div，那么这段代码会同时为所有div添加视图。这触发所有的动画开始时，第一个div来查看，不是我要找的

---

有谁有更好的主意可以帮助我吗？

对不同的元素使用不同的类或使用ID

$(window).scroll(function(){

    if (isScrolledIntoView('.class1') === true) {
        $('.class1').addClass('in-view')
    }
    if (isScrolledIntoView('.class2') === true) {
        $('.class2').addClass('in-view')
    }

});

或

---

对不同的元素使用不同的类或使用ID

$(window).scroll(function(){

    if (isScrolledIntoView('.class1') === true) {
        $('.class1').addClass('in-view')
    }
    if (isScrolledIntoView('.class2') === true) {
        $('.class2').addClass('in-view')
    }

});

或

试试这个：

$(window).scroll(function () {
   $('.class').each(function () {
      if (isScrolledIntoView(this) === true) {
          $(this).addClass('in-view')
      }
   });
});

循环遍历所有元素，并在函数isScrolledIntoViewthis中传递当前上下文，因此这里是视图中可用的当前元素

试试这个：

$(window).scroll(function () {
   $('.class').each(function () {
      if (isScrolledIntoView(this) === true) {
          $(this).addClass('in-view')
      }
   });
});

循环遍历所有元素，并在函数isScrolledIntoViewthis中传递当前上下文，因此这里是视图中可用的当前元素

---

你有什么问题？在你的小提琴中，你连一个以上的div都没有。因此，回答你的问题是垃圾，提供适当的提琴提琴只是前面代码的示例，我的答案在后面。你的问题是什么？在你的提琴中，你甚至没有包含超过1个div。所以回答你的问题是垃圾，提供适当的提琴提琴只是前面代码的例子，我的答案是在那之后。哦，太好了！它像我在小提琴中想象的那样工作，在我自己的代码上进行测试。工作得很有魅力，谢谢。我只是需要修复一些bug，因为我正在使用animated.css。使用显示：无；在类和显示上：内联；在“视图中的”上无法工作，我必须更新代码以使用不透明度0和1。谢谢，太好了！它像我在小提琴中想象的那样工作，在我自己的代码上进行测试。工作得很有魅力，谢谢。我只是需要修复一些bug，因为我正在使用animated.css。使用显示：无；在类和显示上：内联；在“视图中的”上无法工作，我必须更新代码以使用不透明度0和1。谢谢。事实上，根据ts的提问，这个答案是正确的。事实上，根据ts的提问，这个答案是正确的