如果元素在视口中，打字稿检查正在进行答案

【问题标题】：typescript check ongoing if element is in viewport如果元素在视口中，打字稿检查正在进行
【发布时间】：2020-06-16 09:01:17
【问题描述】：

为了让您正确理解我的问题，我认为我必须深入一点。我知道如何使用 vanilla Javascript 来解决这个问题，它也可以在 typescript 中使用。唯一的问题是我不知道如何在整个应用程序的打字稿中调用此函数。我不能使用 while(true)，而且我知道 Javascript 是单线程的，所以我猜它与 typescript 相同。

如何实现一个检查器，它在整个运行时检查是否存在元素在视图中？

【问题讨论】：

使用 Intersection Observer API developer.mozilla.org/en-US/docs/Web/API/…
stackoverflow.com/questions/123999/…

标签： javascript angular typescript

【解决方案1】：

有关该场景的更多详细信息会有所帮助。我不认为这是特定于打字稿的。概括问题：如果您想检查某个元素是否在视图中，您需要：

a) 查找此状态可能更改的所有事件（而不是投票方式）
b) 确定评估 'is in 视口”

在 a) 的所有事件上运行方法 b) 并将状态更改传达给任何需要知道这一点的人。猜测这是基于 web 和 DOM 的，事件将是 widow.onload、window.onorientationchange、window.onscroll。 'in veiwport' 可以是像素重叠到完全可见之间的任何内容。考虑到边界矩形和视口的元素，这将是基本数学

【讨论】：

【解决方案2】：

您可以在滚动事件上使用 HostListener

@HostListener("window:scroll", ['$event'])
onWindowScroll(event) {
   //Your code here
}

您可以参考这个答案Check if element is partially in viewport 了解如何检查元素是否在视口中

【讨论】：