具有新出现的元素的交叉点观察器

Question

在 React 项目中，我们有一个元素“stickyButton”，它固定在移动设备视口的底部。只要其他一些按钮的 none 可见，它就应该显示。因此，我们尝试使用 IntersectionObserver 来检查这些按钮是否可见

useEffect(() => {
    let stickyButton = document.getElementById("stickyButton");
    function handler(entries) {
        entries.forEach(function(entry) {
            if (entry.isIntersecting) {
                intersecting.push(entry);
            } else {
                intersecting.pop();
            }
        });

        if (intersecting.length > 0) {
            stickyButton.classList.add("hide");
        } else {
            stickyButton.classList.remove("hide");
        }
    }

    let options = {
        threshold: 0.05
    };

    let observer = new IntersectionObserver(handler, options);
    document.querySelectorAll('div.buttons').forEach(button => observer.observe(button));

    return () => observer.disconnect();
},[visibleHosts]);

每次一个按钮变为可见时，我们将其添加到一个“相交”数组中，每次一个按钮再次变为不可见时，我们从该数组中删除一个。只要有一个按钮可见，我们就会隐藏粘滞按钮，当 none 可见时，我们会显示它。

到目前为止工作正常，但是，遗憾的是，在我们列表的末尾，我们有另一个按钮可以加载另外八个实体。这会更改变量“visibleHosts”，从而使我们的 useEffect 重新启动。到目前为止，这就是我们想要的。

但这就是问题所在：新实体很可能通过在视口中做出反应来添加，因此它会被视为可见。但是因为我们从来没有为它输入处理函数，所以它永远不会添加到我们的“相交”数组中。所以我们突然在数组中的元素数量和实际可见的元素数量之间产生了差异。当然，从那时起，粘性按钮不再按预期运行。

有没有一种方法可以检查所有观察到的元素的可见性，而不仅仅是手动检查（这会使 IntersectionObserver 的使用变得毫无意义？）

Answer 1

经过反复试验，我们找到了解决方案，不只是推送和弹出条目，而是推送 entries.target（如果它不在列表中），而不是仅弹出过滤 [=12] =] 从列表中。这比我们以前的版本效果更好。

具有新出现的元素的交叉点观察器

IntersectionOberserver with newly appearing Elements

javascript

reactjs

intersection-observer