问题描述
所以我正在编写一些代码,其中标题在滚动时从左侧或右侧滑入。我已经使用 document.querySelector('subtitle-left) 来选择每个单独的标题,但是你将如何做到这一点,以便所有标题在使用同一段代码滚动时滑入?而不是为一个标题写出同样的东西。我知道您可能必须使用 forEach 循环 - 我将如何为以下代码编写此代码?
function slideInLeft() {
var greenBox = document.querySelector('.subtitle-left');
var greenPosition = greenBox.getBoundingClientRect().top;
var screenPosition = window.innerHeight / 1.2;
if (greenPosition < screenPosition) {
greenBox.classList.add('slide-in-left');
}
}
window.addEventListener('scroll',slideInLeft);
.green-Box-left {
display: block;
position: relative;
width: 20vw;
height: 6vw;
background: #daf4dc;
}
.subtitle-left {
font-family: 'termina',sans-serif;
font-weight: 600;
font-style: normal;
font-size: 2.3vw;
position: absolute;
color: black;
transition: 1s all;
left: 28%;
margin-top: 9%;
transform: translateX(-139%);
}
.slide-in-left {
transform: translateX(0%);
}
<div class="green-Box-left">
<h5 class="subtitle-left">HOMEPAGES</h5>
</div>
<br><br>
<div class="green-Box-left">
<h5 class="subtitle-left">HOMEPAGES 2</h5>
</div>
解决方法
您需要添加 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);