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

Question

页面加载后，我\xe2\x80\x99d 喜欢使用 Intersection Observer API 来观察元素 (addonCard)，以了解该元素是否完全可见。如果该元素不可见或部分可见，我希望该元素滚动到完全可见。如果 it\xe2\x80\x99s 已经完全可见，我希望该元素停止被观察。根据我的理解，您可以通过将阈值属性设置为 1 来检查完全可见性。但是，下面的我的实现不起作用（无论元素是否完全可见，它都会滚动）：

\n

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

\n

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

\n

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

\n

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

\n