Javascript JS在向下滚动到某个节时更改类不会'；我不能正常工作

我有一个可行的函数，它触发我的部分，并在它进入视图时将它的类更改为另一个。这是：

<script>
document.addEventListener('scroll', function (e) {
  var top  = window.pageYOffset + window.innerHeight,
      isVisible = top > document.querySelector('#container').offsetTop;

   if (isVisible) {
     document.getElementById('container').setAttribute("class", "h2class2")
   }
});
</script>

document.addEventListener（'scroll'，函数（e）{
var top=window.pageYOffset+window.innerHeight，
isVisible=top>document.querySelector（“#容器”）.offsetTop；
如果（可见）{
document.getElementById（'container'）.setAttribute（“class”，“h2class2”）
}
});

但我有3个不同的部分，出于某种原因，它们在第一次触发后会同时改变样式。我做错了什么？以下是3个不同触发器的代码，它们是相同的，只更改了ID、类和变量：

<!-- THE FIRST TRIGGER-->
<script>
document.addEventListener('scroll', function (e) {
  var top  = window.pageYOffset + window.innerHeight,
      isVisible = top > document.querySelector('#container').offsetTop;

   if (isVisible) {
     document.getElementById('container').setAttribute("class", "h2class2")
   }
});
</script>

<!-- THE SECOND TRIGGER-->
<script>
document.addEventListener('scroll', function (e) {
  var top2  = window.pageYOffset + window.innerHeight,
      isVisible2 = top2 > document.querySelector('#container2').offsetTop;

   if (isVisible2) {
     document.getElementById('container2').setAttribute("class", "p2class2")
   }
});
</script>

<!-- THE THIRD TRIGGER-->
<script>
document.addEventListener('scroll', function (e) {
  var top3  = window.pageYOffset + window.innerHeight,
      isVisible3 = top3 > document.querySelector('#container3').offsetTop;

   if (isVisible3) {
     document.getElementById('container3').setAttribute("class", "h3class2")
   }
});
</script>

document.addEventListener（'scroll'，函数（e）{
var top=window.pageYOffset+window.innerHeight，
isVisible=top>document.querySelector（“#容器”）.offsetTop；
如果（可见）{
document.getElementById（'container'）.setAttribute（“class”，“h2class2”）
}
});
document.addEventListener（'scroll'，函数（e）{
var top2=window.pageYOffset+window.innerHeight，
isVisible2=top2>document.querySelector（“#container2”）.offsetTop；
如果（可访问2）{
document.getElementById（'container2'）.setAttribute（“类”，“p2class2”）
}
});
document.addEventListener（'scroll'，函数（e）{
var top3=window.pageYOffset+window.innerHeight，
isVisible3=top3>document.querySelector（“#container3”）.offsetTop；
如果（可访问3）{
document.getElementById（'container3'）.setAttribute（“class”，“h3class2”）
}
});

---

谢谢您的帮助。

因此，我通过将触发器ID更改为分区ID来解决这个奇怪的问题，在它们是p和H的ID之前。这很奇怪，但在我将thriggers ID更改为分区ID之后，它开始正常工作。 我是说这句话：

isVisible = top > document.querySelector('#container').offsetTop;

---

#容器应该是一个节。（在我的情况下，它只有在进行此更改后才开始正常工作）

可能会解决您的所有问题，而且它比scroll listener更高效。@Jax-p非常感谢您的评论。也许它确实会解决这个问题。我开始阅读了。非常感谢你。