javascript - 滚动触发器不适用于 forEach() 方法 - JavaScript

Question

我做了一个简单的滚动触发器，当元素超过视口(viewport)高度的 70% 时应用动画。在研究如何做到这一点的同时，我使用了一个元素和 querySelector一切正常。

现在我正在对多个元素进行测试，我将代码更改为 querySelectorAll因此需要使用 forEach带有 forEach 变量的方法 item .我一辈子都无法用 forEach 触发它方法呢？

任何帮助都会很棒。

代码笔:https://codepen.io/pauljohnknight/pen/eywyyP

P.S 我在这里 fork 了 Codepen https://codepen.io/pauljohnknight/pen/xpojao展示它如何与单个 querySelector 一起工作div 如果你需要看到预期的行为

JS

var box = document.querySelectorAll('.box');

function scrollTrigger() {

  var boxPosition = box.getBoundingClientRect().top;
  var boxPositionPercent = (boxPosition / window.innerHeight) * 100;

    console.log(boxPositionPercent);

    box.forEach(function(item){
      if (boxPositionPercent <= 70) {
            item.classList.add('scroll-active')
          } else {
            item.classList.remove('scroll-active')
          }
     });
 }

window.addEventListener("scroll", scrollTrigger);

CSS

body {margin:0; padding: 0; width: 100%; height: 300vh; display:flex; justify-content: center; align-items: center; flex-direction: column;}

.box{
  position: relative;
  width: 50px; 
  background: blue;
  height: 50px;
  opacity: .1;
  margin-bottom: 30px;}

.scroll-active {
  opacity: 1;
}

HTML

<div class="box"></div>
<div class="box"></div>

Answer 1

您的问题是 querySelectorAll正在返回一个元素数组，但您期望的是单个元素。下面我将您的 boxPosition 代码移到了 forEach 中。尝试 this codepen .

function scrollTrigger() {
    var boxes = document.querySelectorAll('.box');

    boxes.forEach(function(box){
        var boxPosition = box.getBoundingClientRect().top;
        var boxPositionPercent = (boxPosition / window.innerHeight) * 100;
        console.log(boxPositionPercent);

        if (boxPositionPercent <= 70) {
            box.classList.add('scroll-active')
        } else {
            box.classList.remove('scroll-active')
        }
   });
 }

window.addEventListener("scroll", scrollTrigger);