javascript - Angular 2.如何检测组件当前是否在视口(viewport)中

Question

我想检测组件位置。当前在视口(viewport)中，如果是，则运行触发器，该触发器统计此特定组件上的动画。

我找不到任何“有 Angular ”的方式来做到这一点。

示例应用程序(主要组件)每个 div 都是应用程序的一个单独组件:

<div id="one">ww</div>
<div id="two">aa</div>
<div id="three">rr</div>
<div id="four">asf</div>
<div id="five">Something...</div>
<div id="six">rq</div>

所以...我想检测组件 5 何时在视口(viewport)中(出现在屏幕上)并开始为该组件设置动画。

有什么想法吗？

谢谢

Answer 1

您可以使用 ng-in-viewport插件。

HTML:

<div id="five" in-viewport (inViewportAction)="action($event)">Something...</div>

组件:

action(event : any){
    if(event.value){
       //Do something here (e.g apply CSS class to start the animation)
    }
}

查看我对类似问题的详细回答here .