使用 window:scroll 时捕获 div id答案

【问题标题】：Capture div id while using window:scroll使用 window:scroll 时捕获 div id
【发布时间】：2021-03-15 17:53:59
【问题描述】：

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

这是我尝试过的：

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

【问题讨论】：

标签： javascript html angular

【解决方案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
  });
};

这是一篇关于如何implement this with angular 的帖子，这只是您能找到的众多帖子之一。

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

【讨论】：

感谢您的帮助，但我可以不使用滚动事件侦听器吗？？
可以，但是 IO 性能更高，如果你想用它来获得良好的性能，你将不得不去抖动你的滚动监听器。此外，如答案中所述，如果您需要支持 IE，则必须使用滚动侦听器。
然后为此使用 IO。还有随时可用的 Angular 指令，也许这会让你更容易。 github.com/ng-web-apis/intersection-observer 但是我从来没有使用过这个指令，所以我不能说这是否好（但从我在 github 上看到的看起来很活跃）