多个跟踪不同元素的 Intersection Observers 合并为一个

Question

我有一个使用 IntersectionObserver 的简单代码，它基本上告诉 object 何时在屏幕上可见，当这种情况发生时，我希望标题更改为与该可见元素相同的名称。问题是我为每个与即将到来的 5 个区域相关的观察者创建了 5 个不同的变量。有没有办法简化这段代码？

现在它可以工作，但对我来说似乎是错误的，我无法弄清楚如何将它们全部合并。

提前致谢！！

var observer = new IntersectionObserver(function(entries) {
    if(entries[0].isIntersecting === true)
        document.querySelector(".productTitle").innerHTML = "Logotype";
}, { threshold: [1] });

var observer1 = new IntersectionObserver(function(entries) {
    if(entries[0].isIntersecting === true)
        document.querySelector(".productTitle").innerHTML = "Branding";
}, { threshold: [1] });

var observer2 = new IntersectionObserver(function(entries) {
    if(entries[0].isIntersecting === true)
        document.querySelector(".productTitle").innerHTML = "Website Dev.";
}, { threshold: [1] });

var observer3 = new IntersectionObserver(function(entries) {
    if(entries[0].isIntersecting === true)
        document.querySelector(".productTitle").innerHTML = "3d Modeling";
}, { threshold: [1] });

var observer4 = new IntersectionObserver(function(entries) {
    if(entries[0].isIntersecting === true)
        document.querySelector(".productTitle").innerHTML = "Vectorial Work";
}, { threshold: [1] });

observer.observe(document.querySelector("#visibleLogo"));
observer1.observe(document.querySelector("#visibleBranding"));
observer2.observe(document.querySelector("#visibleWeb"));
observer3.observe(document.querySelector("#visible3d"));
observer4.observe(document.querySelector("#visibleVector"));

Answer 1

为您的文章元素分配一个常见的 class 喜欢 .page
您只需要一个 IntersectionObserver 实例，您可以将它附加到一个.forEach().

.page

使用 data-* 属性将所需的标题存储在 HTML 本身中，例如：data-title="Title to show when in viewport"

const elTitle = document.querySelector(".productTitle");

const pageInViewport = (entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      elTitle.textContent = entry.target.dataset.title;
    }
  });
};

const pageObs = new IntersectionObserver(pageInViewport);
const obsOptions = {threshold: [1]};

// Attach observer to every .page element:
document.querySelectorAll('.page')
  .forEach(EL => pageObs.observe(EL, obsOptions));

* {
  margin: 0;
  box-sizing: border-box;
}

.productTitle {
  position: fixed;
  top: 0;
  background: gold;
}

.page {
  padding: 30px;
  border: 1px solid #000;
  height: 100vh;
}

<div class="productTitle"></div>

<div class="page" id="visibleLogo" data-title="Logotype">visibleLogo</div>
<div class="page" id="visibleBranding" data-title="Branding">visibleBranding</div>
<div class="page" id="visibleWeb" data-title="Website Dev.">visibleWeb</div>
<div class="page" id="visible3d" data-title="3d Modeling">visible3d</div>
<div class="page" id="visibleVector" data-title="Vectorial Work">visibleVector</div>

多个跟踪不同元素的 Intersection Observers 合并为一个

Several Intersection Observers tracking different elements merged into a single one

javascript