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

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

querySelector

，一切都很好

现在我正在测试多个元素，我将代码更改为

querySelectorAll

，因此需要使用带有forEach变量

项的
forEach
方法。但我一辈子都不能用
forEach
方法触发它

任何帮助都会很棒

代码笔：

另外，如果您需要查看预期的行为，我在这里分叉了代码笔，以展示它如何与单个
querySelector
div一起工作

JS

HTML


您的问题是返回一个元素数组，但您需要一个元素。下面我已经将您的
boxPosition
代码移到了forEach中。试试看

函数scrollTrigger（）{
var-box=document.querySelectorAll（'.box'）；
框。forEach（函数（框）{
var boxPosition=box.getBoundingClientRect（）.top；
变量boxPositionPercent=（boxPosition/window.innerHeight）*100；
控制台日志（百分比）；
如果（boxPositionPercent问题是您试图获取数组的偏移顶部，那么您需要获取每个元素的偏移顶部，因此，您只需要将变量
boxPosition
和
box PositionPercent
放入de forEach中，然后更改
box.getBoudingClientRect（）.top
到
项.getBoundingClientRect（）.top
，如下所示：


var-box=document.querySelectorAll（'.box'）；
函数scrollTrigger（）{
框.forEach（功能（项目）{
var boxPosition=item.getBoundingClientRect（）.top；
变量boxPositionPercent=（boxPosition/window.innerHeight）*100；
if（boxPositionPercent）我看到
TypeError:box.getBoundingClientRect不是运行代码笔时控制台中的一个函数
错误。为什么不使用jquery？var-boxPosition=box.getBoundingClientRect（）.top；这是元素数组时的问题
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);

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

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

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

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

function scrollTrigger() {

  box.forEach(function(item){
    var boxPosition = item.getBoundingClientRect().top;
    var boxPositionPercent = (boxPosition / window.innerHeight) * 100;
      if (boxPositionPercent <= 70) {
            item.classList.add('scroll-active')
          } else {
            item.classList.remove('scroll-active')
          }
     });

 }

window.addEventListener("scroll", scrollTrigger);