要在滚动条上滑入的所有标题-JavaScript

因此，我正在编写一些代码，其中标题在滚动时从左侧或右侧滑入。我已经使用document.querySelector（'subtitle-left'）来选择每个单独的标题，但是您如何做到这一点，以便在滚动时使用相同的代码段滑入所有标题？而不是为一个标题写同样的东西。我知道您可能必须使用forEach循环-我将如何为下面的代码编写此循环

函数slideInLeft（）{
var greenBox=document.querySelector（'.subtitle left'）；
var greenPosition=greenBox.getBoundingClientRect（）.top；
var screenPosition=window.innerHeight/1.2；
如果（绿色位置<屏幕位置）{
greenBox.classList.add（'slide-in-left'）；
}
}
window.addEventListener（'scroll'，slideInLeft）
。左绿色框{
显示：块；
位置：相对位置；
宽度：20vw；
高度：6vw；
背景：#daf4dc；
}
.左字幕{
字体系列：“termina”，无衬线；
字号：600；
字体风格：普通；
字体大小：2.3vw；
位置：绝对位置；
颜色：黑色；
过渡：1s全部；
左：28%；
利润率最高：9%；
转化：translateX（-139%）；
}
.向左滑{
转化：translateX（0%）；
}

主页



主页2
您需要添加querySelectorAll以获取类的所有实例，然后稍微重写代码，以包含您已经遵循的forEach循环。您可以尝试类似的方法：

  function slideInLeft() {
        var greenBox = document.querySelectorAll('.subtitle-left');
     
        greenBox.forEach(function(box) {

            var greenPosition = box.getBoundingClientRect().top;
        var screenPosition = window.innerHeight / 1.2;
  
        if (greenPosition < screenPosition) {
          box.classList.add('slide-in-left');
        }
       
});
} 
window.addEventListener('scroll', slideInLeft);


函数slideInLeft（）{
var greenBox=document.queryselectoral（'.subtitle left'）；
greenBox.forEach（函数（框）{
var greenPosition=box.getBoundingClientRect（）.top；
var screenPosition=window.innerHeight/1.2；
如果（绿色位置<屏幕位置）{
box.classList.add（'slide-in-left'）；
}
});
} 
window.addEventListener（'scroll'，slideInLeft）；
querySelector
将只给您第一个匹配元素，尝试使用
querySelector all
这样您将获得所有匹配元素，然后您可以迭代它们并向它们添加工作正常的类，谢谢！）