Question

我正处于学习javascript的阶段，我遇到了问题。

我编写了代码，将类添加到div，并在滚动到特定部分后显示了它。我的代码：

window.addEventListener('scroll', function() {
const picture2 = document.querySelector('.box2-pic');
const section2 = document.querySelector('.box2');
const section2Top = section2.getBoundingClientRect().top;


const picture3 = document.querySelector('.box3-pic');
const section3 = document.querySelector('.box3');
const section3Top = section3.getBoundingClientRect().top;

if (window.pageYOffset >= section2Top) {
    picture2.classList.add('visible');
} 

if (window.pageYOffset >= section3Top) {
    picture3.classList.add('visible');
}

}）;

但是，如果我想收集所有这些元素并将它们添加到一个函数中怎么办？每个部分都有一个div，我想在滚动后添加显示动画。

目前，每个div和部分都分别下载。我已经通过 querySelectoAll 获取了所有的div并对其进行了分区，然后执行以下操作：

const pictures = document.getElementsByClassName('.allPics'); 
const sections = document.getElementsByClassName('section'); 

window.addEventListener('scroll', function() {
   for (let i = 0; i < sections.length; i++) {
    if (window.pageYOffset >= sections[i].getBoundingClientRect().top) {
        pictures[i].classList.add('visible');
        }
    }})

但是，它不起作用。我究竟做错了什么？

是否可以用纯JavaScript编写该功能？ 您能帮我了解如何纠正此问题吗？：）

Answer 1

我认为您的代码存在的主要问题是pictures[i]可能无法访问，因为i是整个节的迭代器，而不是图片。

在许多情况下，forEach是一种更简单的模式，因为您不必担心仅用于迭代集合的变量的状态。

getElementsByClassName不允许使用forEach，但是您可以使用querySelectorAll。我使用了箭头函数，该箭头函数在许多方面与常规函数相同，但是节省了一点空间（区别很重要，但在这里不相关）

根据您所提供的内容，我不能完全确定下面的示例是否确实符合您的要求，但是我相信它应该显示一个可能的示例以及如何实现的示例实现。

const pictures = document.querySelectorAll('.allPics');
const sections = document.querySelectorAll('.section');

window.addEventListener('scroll', function() {
  sections.forEach(section => {
    if (window.pageYOffset >= section.getBoundingClientRect().top) {
      const sectionPictures = section.querySelectorAll('.allPics');
      sectionPictures.forEach(picture => picture.classList.add('visible'));   
    }
  })
})

.section {
  border: solid 3px rgba(20, 20, 30, 0.6);
  margin-bottom: 200px;
}

img {
  display: block;
  height: 30vh;
  opacity: 0;
  transition: all 5s ease;
}

.visible {
  opacity: 1;
}

<div class="section">
  <img class="allPics" src="https://flif.info/example-images/fish.png" />
  <img class="allPics" src="https://flif.info/example-images/fish.png" />
  <img class="allPics" src="https://flif.info/example-images/fish.png" />
</div>

<div class="section">
  <img class="allPics" src="https://flif.info/example-images/fish.png" />
  <img class="allPics" src="https://flif.info/example-images/fish.png" />
  <img class="allPics" src="https://flif.info/example-images/fish.png" />
</div>

<div class="section">
  <img class="allPics" src="https://flif.info/example-images/fish.png" />
  <img class="allPics" src="https://flif.info/example-images/fish.png" />
  <img class="allPics" src="https://flif.info/example-images/fish.png" />
</div>

<div class="section">
  <img class="allPics" src="https://flif.info/example-images/fish.png" />
  <img class="allPics" src="https://flif.info/example-images/fish.png" />
  <img class="allPics" src="https://flif.info/example-images/fish.png" />
</div>

<div class="section">
  <img class="allPics" src="https://flif.info/example-images/fish.png" />
  <img class="allPics" src="https://flif.info/example-images/fish.png" />
  <img class="allPics" src="https://flif.info/example-images/fish.png" />
</div>

窗口滚动-显示div-许多div的功能-纯js

1 个答案: