使用 window:scroll 时捕获 div id

Question

我有一个 angular 8 应用程序，我正在尝试使用 window:scroll 功能在滚动到达特定组件时加载组件。 我可以通过使用 window.pageYOffset 来实现这一点，但由于组件的高度是动态的 window.pageYOffset 无济于事。 有没有办法通过识别 id 或其他东西来识别滚动是否已到达该组件？ 我可以使用事件捕获 id 吗？

这是我尝试过的：

@HostListener('window:scroll', ['$event']) onScroll(event) {
    if (window.pageYOffset >= 350) {
        this.scrollPointReached = true;
    }
}

Answer 1

不要为此使用滚动事件侦听器，请使用Intersection Observer (IO)

有了这个，您可以在容器在视口中可见（或离开视口并且不再可见）时收听

首先，您使用首选选项创建一个新的观察者：

let options = {
  rootMargin: '0px',
  threshold: 1.0
}

let observer = new IntersectionObserver(callback, options);

然后你设置需要观察的元素：

let singleTarget = document.querySelector('#observeTarget');
observer.observe(target);

let multiTargets = document.querySelectorAll('.targets');
multiTargets.forEach(target => observer.observe(target) )

最后，您定义当元素出现时会发生什么：

let callback = (entries, observer) => {
  entries.forEach(entry => {
    // Each entry describes an intersection change for one observed
    // target element:
    //   entry.isIntersecting
    //   entry.rootBounds
  });
};

这是一篇关于如何使用 angular 实现此功能的帖子，这只是您可以找到的众多内容之一。

请记住，如果您必须支持 IE，您不能使用这种方法，那么您将不得不使用滚动事件以某种方式实现您自己的逻辑。