多个条目的单个路口观察器

Question

无法完全理解 IntersectionObserver
在下面的例子中，一切正常，但我试图为多个条目只写一个观察者
我收到了各种错误消息。
请帮助

let io = new IntersectionObserver((entries)=>{
    entries.forEach(entry=>{
        if(entry.isIntersecting){navt.classList.remove('navt1');}
        else{navt.classList.add('navt1');}
    })
})

let io2 = new IntersectionObserver((entries)=>{
    entries.forEach(entry=>{
        if(entry.isIntersecting){gotopw.style.display = 'block';}
        else{gotopw.style.display = 'none';}
    })
})

$(document).ready(function(){
    io.observe(document.querySelector('#wrapt'));
    io2.observe(document.querySelector('#apanel'));
});

Answer 1

每个相交实体指的是相交的元素。因此，要创建一个 IntersectionObserver，您只需利用它。

这是一个展示概念的简化示例。请注意，有两个“框”可以滚动到视图中。当他们滚动进入视图时，背景颜色会单独变化。我使用了交集比，所以你可以看到发生的变化。

modify() 和 revert() 函数表示您将在两个交集阈值之一中执行的操作。

元素 id 的测试是允许对多个元素使用一个 IntersectionObserver 的技巧。

慢慢滚动以查看两个框。

let io = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting && entry.intersectionRatio > 0.5) {
      modify(entry.target);
    } else {
      revert(entry.target);
    }
  })
}, {
  threshold: 0.5
})

function modify(el) {
  if (el.id === "wrapt") {
    el.style.backgroundColor = 'red';
  }
  if (el.id === "apanel") {
    el.style.backgroundColor = 'green';
  }
}

function revert(el) {
  if (el.id === "wrapt") {
    el.style.backgroundColor = 'initial';
  }
  if (el.id === "apanel") {
    el.style.backgroundColor = 'initial';
  }
}


io.observe(document.querySelector('#wrapt'));
io.observe(document.querySelector('#apanel'));

#wrapt {
  border: 2px solid black;
  height: 100px;
  width: 100px;
}

#apanel {
  border: 2px solid blue;
  height: 100px;
  width: 100px;
}

.empty {
  height: 400px;
  width: 100px;
}

<div class="empty"> </div>
<div id="wrapt">Wrapt</div>
<div class="empty"></div>
<div id="apanel">aPanel</div>

多个条目的单个路口观察器

single intersection observer for multiple entries

javascript

intersection-observer