querySelectorAll && getBoundingClientRect答案

【问题标题】：querySelectorAll && getBoundingClientRectquerySelectorAll && getBoundingClientRect
【发布时间】：2021-01-20 16:55:26
【问题描述】：

JavaScript querySelectorAll () 方法有问题。

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

我创建了一个名为 scrollAppear() 的函数，里面有很多东西..

function scrollAppear()

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

这会返回一个数组（nodeList）..

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

然后我想访问段落的坐标 Y，为此我使用了 getBoundingClientRect().top 方法，它返回指定元素的顶部 relative在这种情况下，位于窗口顶部。

我将值存储在一个名为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/else 语句检查一个条件，检查元素的顶部值是否小于窗口的高度，如果为真，则添加类 fadeInAnimation，它将不透明度重置为 1和 transform: translateY to 0 with a transition of 1, 正如我在解释开始时指定的那样。

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

最后我只是调用函数滚动出现，当用户滚动窗口时：

window.addEventListener("scroll",scrollAppear);

我不知道为什么，但是当我使用 querySelector 并且我只有一个段落时，淡入淡出效果有效，但是当我使用 querySelectorAll 并且我想抓取多个段落时，它不起作用，也许我没有' t loop great 或者别的什么，我在不同的地方使用了 console.log 试图知道发生了什么，但我不明白为什么？

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

【问题讨论】：

您将值覆盖到变量中。它只会是最后一个值
我不明白
var a; for(i=0;i<5;i++) { a = i; } console.log(a); a 不会是 5 个值。

标签： javascript for-loop selectors-api onscroll getboundingclientrect

【解决方案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/

【讨论】：