Javascript 仅当CSS类可用时才运行js函数

问题在于以下功能：

document.addEventListener("scroll", function(event) {
  // Check the viewport status
  if (inViewport(project1)) {
    pagination1.style.background = "#e3e3e3";
  } else {
    pagination1.style.background = "transparent";
  }
});

每次我在没有包含类“project1”的DIV的页面上滚动时都会出现错误

是否有方法仅在设置了该DIV/class时触发此函数。实际上，我希望DIV本身触发函数

完整的代码考虑了以下答案，但还不起作用：

Project是一个投资组合网站，最多可垂直显示20多个项目>所有项目彼此重叠。每个项目都是一个包含艺术项目图像的滑块。项目说明、标题和编号应显示在导航栏的顶部位置：仅当相应项目滚动到视图中时固定

---

js脚本应该为cms逐渐添加的30多个项目设置。这意味着在开始时，一些项目是在js脚本中设置的，但cms尚未添加

您可以先检查div是否存在

document.addEventListener("scroll", function(event) {
  // check if exists
  if(document.getElementsByClassName('project1').length > 0)
  {
     //then avoid redundancy/the if statement with a ternary
     pagination1.style.background = inViewport(project1) ? "#e3e3e3" : "transparent";
  }
});

---

希望这对您有所帮助

您有一个js变量project1，但在显示的代码中没有定义它。它是在哪里定义的&它是什么？您能显示定义project1变量的代码吗？谢谢您的请求。根据最初的帖子进行更新，添加了完整的代码，并考虑了estavilloProject描述中的答案。代码中的重复太多了。你的HTML是什么样子的？如果一个项目的所有元素都是一个共同祖先的后代，那么这可能会大大缩短。您忘了您已经有了project1。无需在诸如scroll之类的重大事件上查询整个DOM—尝试查找类元素。因此，在目前的状态下，这是没有帮助的。如果project1&&project1.length足够了。但是还有可能未处理的分页1…谢谢你的帮助。不幸的是，代码还不能工作。我已经通过邮件进行了更新，并在下面发布了完整的代码。非常欢迎您的帮助！已添加项目说明。已解决该问题。下面来自estavillo的代码实现了这一点。ifdocument.getElementsByClassName'project1'.length>0需要触发器类的变量，而不是我为该类设置的变量。谢谢你，维洛！我已经按类名更新了上面问题中的代码，它适合我。

document.addEventListener("scroll", function(event) {
  // check if exists
  if(document.getElementsByClassName('project1').length > 0)
  {
     //then avoid redundancy/the if statement with a ternary
     pagination1.style.background = inViewport(project1) ? "#e3e3e3" : "transparent";
  }
});