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

Question

问题是以下函数：

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

每次我在没有带有类"project1"的 DIV 的页面上滚动时都会给出错误。

有没有办法仅在设置该 DIV/类时触发此功能。实际上，我希望DIV本身触发该功能。

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

"use strict";
function inViewport(element) {
// Get the elements position relative to the viewport
var bb = element.getBoundingClientRect(); // Check if the element is outside the viewport
// Then invert the returned value because you want to know the opposite
return !(bb.top > innerHeight || bb.bottom < 0);
}
var hfirst1 = document.querySelector(".hashtag-first1");
var hfirst2 = document.querySelector(".hashtag-first2");
var hfirst3 = document.querySelector(".hashtag-first3");
var hfirst4 = document.querySelector(".hashtag-first4");
var hfirst5 = document.querySelector(".hashtag-first5");
var hfirst6 = document.querySelector(".hashtag-first6");
var hsecond1 = document.querySelector(".hashtag-second1");
var hsecond2 = document.querySelector(".hashtag-second2");
var hsecond3 = document.querySelector(".hashtag-second3");
var hsecond4 = document.querySelector(".hashtag-second4");
var hsecond5 = document.querySelector(".hashtag-second5");
var hsecond6 = document.querySelector(".hashtag-second6");
var hthird1 = document.querySelector(".hashtag-third1");
var hthird2 = document.querySelector(".hashtag-third2");
var hthird3 = document.querySelector(".hashtag-third3");
var hthird4 = document.querySelector(".hashtag-third4");
var hthird5 = document.querySelector(".hashtag-third5");
var hthird6 = document.querySelector(".hashtag-third6");
var n1 = document.querySelector(".name1");
var n2 = document.querySelector(".name2");
var n3 = document.querySelector(".name3");
var n4 = document.querySelector(".name4");
var n5 = document.querySelector(".name5");
var n6 = document.querySelector(".name6");
var d1 = document.querySelector(".details1");
var d2 = document.querySelector(".details2");
var d3 = document.querySelector(".details3");
var d4 = document.querySelector(".details4");
var d5 = document.querySelector(".details5");
var d6 = document.querySelector(".details6");
var project1 = document.querySelector(".project-trigger1");
var project2 = document.querySelector(".project-trigger2");
var project3 = document.querySelector(".project-trigger3");
var project4 = document.querySelector(".project-trigger4");
var project5 = document.querySelector(".project-trigger5");
var project6 = document.querySelector(".project-trigger6");
var pagination1 = document.querySelector(".bullet1");
var pagination2 = document.querySelector(".bullet2");
var pagination3 = document.querySelector(".bullet3");
var pagination4 = document.querySelector(".bullet4");
var pagination5 = document.querySelector(".bullet5");
var pagination6 = document.querySelector(".bullet6"); // Listen for the scroll event

document.addEventListener("scroll", function(event) {
// check if exists
if(document.getElementsByClassName("project-trigger1").length > 0)
{
//then run the function
pagination1.style.background = inViewport(project1) ? "#e3e3e3" : "transparent";
hfirst1.style.color = inViewport(project1) ? "#ffffff" : "transparent";
hsecond1.style.color = inViewport(project1) ? "#ffffff" : "transparent";
hthird1.style.color = inViewport(project1) ? "#ffffff" : "transparent";
n1.style.color = inViewport(project1) ? "#ffffff" : "transparent";
n1.style.color = inViewport(project1) ? "#ffffff" : "transparent";
}
});
document.addEventListener("scroll", function(event) {
// check if exists
if(document.getElementsByClassName("project-trigger2").length > 0)
{
//then run the function
pagination2.style.background = inViewport(project2) ? "#e3e3e3" : "transparent";
hfirst2.style.color = inViewport(project2) ? "#ffffff" : "transparent";
hsecond2.style.color = inViewport(project2) ? "#ffffff" : "transparent";
hthird2.style.color = inViewport(project2) ? "#ffffff" : "transparent";
n2.style.color = inViewport(project2) ? "#ffffff" : "transparent";
n2.style.color = inViewport(project2) ? "#ffffff" : "transparent";
}
});
document.addEventListener("scroll", function(event) {
// check if exists
if(document.getElementsByClassName("project3").length > 0)
{
//then run the function
pagination3.style.background = inViewport(project3) ? "#e3e3e3" : "transparent";
hfirst3.style.color = inViewport(project3) ? "#ffffff" : "transparent";
hsecond3.style.color = inViewport(project3) ? "#ffffff" : "transparent";
hthird3.style.color = inViewport(project3) ? "#ffffff" : "transparent";
n3.style.color = inViewport(project3) ? "#ffffff" : "transparent";
n3.style.color = inViewport(project3) ? "#ffffff" : "transparent";
}
});
document.addEventListener("scroll", function(event) {
// check if exists
if(document.getElementsByClassName("project-trigger4").length > 0)
{
//then run the function
pagination4.style.background = inViewport(project4) ? "#e3e3e3" : "transparent";
hfirst4.style.color = inViewport(project4) ? "#ffffff" : "transparent";
hsecond4.style.color = inViewport(project4) ? "#ffffff" : "transparent";
hthird4.style.color = inViewport(project4) ? "#ffffff" : "transparent";
n4.style.color = inViewport(project4) ? "#ffffff" : "transparent";
n4.style.color = inViewport(project4) ? "#ffffff" : "transparent";
}
});
document.addEventListener("scroll", function(event) {
// check if exists
if(document.getElementsByClassName("project-trigger5").length > 0)
{
//then run the function
pagination5.style.background = inViewport(project5) ? "#e3e3e3" : "transparent";
hfirst5.style.color = inViewport(project5) ? "#ffffff" : "transparent";
hsecond5.style.color = inViewport(project5) ? "#ffffff" : "transparent";
hthird5.style.color = inViewport(project5) ? "#ffffff" : "transparent";
n5.style.color = inViewport(project5) ? "#ffffff" : "transparent";
n5.style.color = inViewport(project5) ? "#ffffff" : "transparent";
}
});
document.addEventListener("scroll", function(event) {
// check if exists
if(document.getElementsByClassName("project-trigger6").length > 0)
{
//then run the function
pagination6.style.background = inViewport(project6) ? "#e3e3e3" : "transparent";
hfirst6.style.color = inViewport(project6) ? "#ffffff" : "transparent";
hsecond6.style.color = inViewport(project6) ? "#ffffff" : "transparent";
hthird6.style.color = inViewport(project6) ? "#ffffff" : "transparent";
n6.style.color = inViewport(project6) ? "#ffffff" : "transparent";
n6.style.color = inViewport(project6) ? "#ffffff" : "transparent";
}
});

项目是一个项目组合网站，最多包含 20+ 个项目(垂直显示>所有项目相互重叠(。每个项目都是一个包含艺术项目图像的滑块。只有当相应的项目滚动到视图中时，项目描述、标题和编号才应显示在顶部的导航栏中(位置：固定(。

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

Answer 1

您可以先尝试检查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";
}
});

希望这有帮助