javascript - 使用 Intersection Observer 检查元素是否在浏览器视口上完全可见

Question

页面加载后，我想使用 Intersection Observer API 观察一个元素（addonCard），以了解该元素是否完全可见。如果元素不可见或部分可见，我希望将元素滚动到完全可见的状态。如果它已经完全可见，我希望元素停止被观察。根据我的理解，您可以通过将 threshold 属性设置为 1 来检查完全可见性。但是，我在下面的实现不起作用（无论元素是否完全可见，它都会滚动）：

let addonCard = this.querySelector(`[addon-id="${param}"]`);
let observer = new IntersectionObserver(
  (entries, observer) => {
    entries.forEach(entry => {
      if (entry.intersectionRatio != 1) {
        let stickyHeaderHeight = document.querySelector(
          "#page-header > .sticky-container"
        ).offsetHeight;
        let topOfTarget = entry.target.offsetTop - stickyHeaderHeight;
        window.scrollTo({
          top: topOfTarget,
          behavior: "smooth"
        });
      } else {
        observer.unobserve(entry.target);
      }
    });
  }, {
    threshold: 1,
  }
);
observer.observe(addonCard);

有人可以解释为什么这个实现不起作用以及如何使它起作用吗？为什么entry.intersectionRatio永远不会从 0 改变？

预期行为：如果不是完全可见，addonCard 应该滚动到完全可见。如果它已经完全可见，则不应进行滚动。

实际行为：无论 addonCard 是否完全可见，都会发生滚动。