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

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 和 section 都是单独下载的。我已经通过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编写该函数吗？ 你能帮我理解我应该如何纠正这个问题吗？:)

标签： javascriptforeachscroll

Answer 1

我认为您拥有的代码的主要问题是pictures[i]可能无法访问，就像i在部分长度而不是图片上的迭代器一样。

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

getElementsByClassName不允许 a 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>