querySelectorAll && getBoundingClientRect

Question

JavaScript querySelectorAll ()方法有问题。

我想对两个段落(p)标签产生淡出效果，它们的不透明度最初设置为0，并进行了转换: translateY为15 at，将它们向下移动一点，当段落出现在屏幕底部时，返回到1的不透明度，并在用户向下滚动期间将:translateY转换为0。

我创建了一个叫做scrollAppear()，的函数，里面有很多东西。

function scrollAppear()

首先，我有一个包含类“paragraphsToFade”的两个段落的变量；我使用querySelectorAll方法获取具有类(.paragraphs_to_fade)的两个(p)标记。

这会给我一个数组(NodeList)。

    var paragraphsToFade=document.querySelectorAll(".paragraphs_to_fade");

然后，我想访问段落的坐标Y，为了实现这一点，我使用了getBoundingClientRect().top，方法，该方法相对于窗口顶部返回指定元素的顶部。

我将值存储在一个名为paragraphsPosition；的变量中。

但是要有两个(p)元素的坐标Y，我必须循环到for循环中，并指定i变量，将两个值都循环迭代，如下所示：

   for (let i = 0; i < paragraphsToFade.length; i++) {
        var paragraphsPosition=paragraphsToFade[i].getBoundingClientRect().top;
    }

之后，我创建了一个名为screenSize的变量，它可以访问窗口高度：

var screenSize=window.innerHeight;

然后，我使用if / add语句检查一个条件，以检查元素的最高值是否小于窗口的高度，如果为真，则添加类fadeInAnimation，它将透明度重置为1，转换为1s的转换: translateY为0，如我解释的开头所指定的那样。

   var screenSize=window.innerHeight;
    if(paragraphsPosition < screenSize){
        paragraphsToFade.classList.add("fadeInAnimation");
    }    

最后，我只需调用函数滚动显示，当用户滚动窗口时：

window.addEventListener("scroll",scrollAppear);

我不知道为什么，但当我使用querySelector时，我只有一个段落的褪色效果有效，但是当我使用querySelectorAll时，我想抓取多个段落，它不起作用，也许我没有循环很好或者其他什么，我用console.log在不同的地方试图知道发生了什么，但我不明白为什么？

我在教程中看到了这种褪色效果：https://www.youtube.com/watch?v=C_JKlr4WKKs

Answer 1

看到这个小提琴，您将类附加到多个元素的对象中，而不是每个元素本身。

在遍历数组时，将类包含到for循环中的元素中。

function scrollAppear(){
  var paragraphsToFade = document.querySelectorAll(".paragraphs_to_fade");
  var paragraphsPosition;
  for (let i = 0; i < paragraphsToFade.length; i++) {
    paragraphsPosition=paragraphsToFade[i].getBoundingClientRect().top;
    var screenSize=window.innerHeight;
    if(paragraphsPosition < screenSize && !paragraphsToFade[i].classList.contains("fadeInAnimation") ){

      paragraphsToFade[i].classList.add("fadeInAnimation");
          console.log('added class');
    }    
  }
}
window.addEventListener("scroll",scrollAppear);

工作演示：https://jsfiddle.net/k5ubsecf/1/