Question

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

现在，我正在对多个元素进行测试，我将代码更改为querySelectorAll，因此需要使用带有forEach变量forEach的{{1}}方法。我不能为我的生活让它用item方法触发吗？

任何帮助都会很棒。

Codepen：https://codepen.io/pauljohnknight/pen/eywyyP

P.S我在这里将Codepen分叉https://codepen.io/pauljohnknight/pen/xpojao，以展示如果您需要查看预期行为，它如何与单forEach div一起使用

JS

querySelector

CSS

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);

HTML

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;
}

Answer 1

问题是你试图获得数组的偏移顶部，你需要得到每个元素的偏移顶部，所以，你只需要放置变量boxPosition和{{ 1}}在de forEach中，并将box PositionPercent更改为box.getBoudingClientRect().top，如下所示：

example

item.getBoundingClientRect().top

滚动触发器不使用forEach（）方法 - JavaScript

1 个答案: