与新出现的元素的交叉点观察者答案

【问题标题】：IntersectionOberserver with newly appearing Elements与新出现的元素的交叉点观察者
【发布时间】：2021-08-05 13:58:16
【问题描述】：

在 react 项目中，我们有一个元素“stickyButton”，它固定在移动设备视口的底部。只要没有其他按钮可见，它就应该显示。所以，我们尝试使用 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]);

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

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

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

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

【问题讨论】：

标签： javascript reactjs intersection-observer

【解决方案1】：

经过一些试验和错误，我们找到了解决方案，不仅是推送和弹出条目，而是推送 entries.target 如果它不在列表中，而不是从列表中弹出过滤条目。这比我们以前的版本好得多。

【讨论】：