如何检查元素是否在 angular 2 的视口中？

Question

如何在 angular 2 中检查元素是否在视口中？。我试过很多 npm 包。但没有工作。如何检查元素是否在视口中？如果元素在视口中，我想在页面滚动时调用 API？

我有三个选项卡。我必须检查选项卡是否处于活动状态并且元素是否在视口中。如何查询？

Answer 1

我有一段时间没有使用它了，但可能正是您正在寻找的（重构它以满足您的需要）：

export function getY(element: HTMLElement) {
  let y = element.offsetTop;

  while (element.offsetParent && element.offsetParent != document.body) {
    element = <HTMLElement>element.offsetParent;
    y += element.offsetTop;
  }
  return y;
}

export function getElementOnScreen(selector: string, delta: number = 0.3): any {
  let windowH = self.innerHeight;
  let windowY = self.pageYOffset;
  let margin = windowH * delta;

  return Array
    .from(document.querySelectorAll(selector))
    .find(el => {
      let elementY = getY(el as HTMLElement);
      let elementH = el.clientHeight;

      let topOnScreen = (elementY - windowY) <= margin;
      let bottomOnScreen = (windowY + margin) <= (elementY + elementH);

      return topOnScreen && bottomOnScreen;
    });
}

export function onScreen$(selector: string): Observable<boolean> {
  return Observable
    .fromEvent(window, 'scroll')
    .throttleTime(100)
    .map(event => getElementOnScreen(selector))

    .do(element => call.api(element))

    .map(Boolean)
    .distinctUntilChanged()
}

使用示例：

<div id="test" [class.i-am-in-viewport]="onScreen$('div#test') |async" />

Answer 2

如果元素在视口上，我使用“jQuery-viewport-checker”来执行各种任务。它对我有用。这可能对您有帮助：

如果您的 angular 2 项目中没有 "jQuery"，请执行此操作：

您必须使用 'Bower' 安装 'jQuery-viewport-checker' 并将其添加到 'angular-cli.json' 文件中的 'Scripts' 就像安装 'jQuery' 在 link 我已经提供了。

命令：

bower install jQuery-viewport-checker

在'angular-cli.json'中：

"scripts": [
      "../bower_components/jquery/dist/jquery.min.js",
      "../bower_components/jQuery-viewport-checker/dist/jquery.viewportchecker.min.js"
  ]

现在您可以使用'jQuery-viewport-checker'

更多信息： https://github.com/dirkgroenen/jQuery-viewport-checker

您的 app.component.ts 将如下所示：

import { Component, OnInit } from '@angular/core';
declare var $:any;

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
 title = 'app works!';

 ngOnInit(){

        $(document).ready(function(){
        $("p").click(function(){
        $(this).hide();
    });
    });


        $('.dummy').viewportChecker({
            classToAdd: 'visible', // Class to add to the elements when they are visible,
            classToAddForFullView: 'full-visible', // Class to add when an item is completely visible in the viewport
            classToRemove: 'invisible', // Class to remove before adding 'classToAdd' to the elements
            removeClassAfterAnimation: false, // Remove added classes after animation has finished
            offset: [100], // The offset of the elements (let them appear earlier or later). This can also be percentage based by adding a '%' at the end
            invertBottomOffset: true, // Add the offset as a negative number to the element's bottom
            repeat: false, // Add the possibility to remove the class if the elements are not visible
            callbackFunction: function(elem, action){}, // Callback to do after a class was added to an element. Action will return "add" or "remove", depending if the class was added or removed
            scrollHorizontal: false // Set to true if your website scrolls horizontal instead of vertical.
    });
 }

}

此处 class 'visible' 将添加到元素中的“.dummy” class 中，一旦它位于视口中。您应该根据需要更多地探索它（其他参数）因此，您可以对 HTML 进行编码。希望对你有帮助。

更新:

如果出现错误，请尝试以下操作（因为这些对问题的作者有效）：

1): 尝试将端口 ng serve --port 4200 更改为 4208（或任何其他端口）

2): 将视口检查器代码放入准备就绪的文档中，如下所示：

jQuery(document).ready(function(){ 
      $('.dummy').viewportChecker({
            classToAdd: 'visible', // Class to add to the elements when they are visible,
            classToAddForFullView: 'full-visible', // Class to add when an item is completely visible in the viewport
            classToRemove: 'invisible', // Class to remove before adding 'classToAdd' to the elements
            removeClassAfterAnimation: false, // Remove added classes after animation has finished
            //offset: [100], // The offset of the elements (let them appear earlier or later). This can also be percentage based by adding a '%' at the end
            invertBottomOffset: true, // Add the offset as a negative number to the element's bottom
            repeat: false, // Add the possibility to remove the class if the elements are not visible
            callbackFunction: function(elem, action){}, // Callback to do after a class was added to an element. Action will return "add" or "remove", depending if the class was added or removed
            scrollHorizontal: false // Set to true if your website scrolls horizontal instead of vertical.
    });
 });

并删除偏移量：[100]

Answer 3

在 angular 中使用 jQuery 不是一个好方法。

您可以使用 intersection-observer API 来实现这一点。

我使用 Youtube Iframe 创建了一个演示应用程序 API，当视频在视口中时播放，当视频离开视口时暂停。

工作演示

现场演示：- https://angular-viewport-intersection-observer-youtube.stackblitz.io

实时编辑：- https://stackblitz.com/edit/angular-viewport-intersection-observer-youtube

使用的包

https://github.com/thisissoon/angular-inviewport

如何检查元素是否在 angular 2 的视口中？

How to check the element is in viewport on angular 2?

angular2-routing

angular

工作演示

使用的包