如何檢查元素是在角度2的視口？

Question

如何檢查元素是否在角度2中的視口？我已經嘗試了很多npm軟件包。但不工作。如何檢查元素是在視口？如果元素在視口中，我想在頁面滾動上調用API？

我有三個選項卡。我必須檢查選項卡是否處於活動狀態且元素位於視口中。如何檢查？

Answer 1

我如果元素在視口上，使用'jQuery-viewport-checker'執行各種任務。它爲我工作。這可以幫助你：

按照這個，如果你沒有「jQuery的」在你的角2項目的工作： https://stackoverflow.com/a/42295505/7532440

你必須安裝「jQuery的視檢查器」使用「鮑爾'並將其添加到'angular-cli.json'文件中的'腳本'，就像您在我提供的鏈接中安裝'jQuery'的方式一樣。

CMD：

bower install jQuery-viewport-checker 

在 '角cli.json'

：

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

現在你可以使用 'jQuery的視檢查器'

更多信息上： 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. 
    }); 
} 

} 

這裏類'可見'將被添加到元素中的「.dummy」類中，一旦它在ViewPort中。您應該根據您的需要更多地探索它（其他參數） 因此，您可以編寫HTML代碼。 我希望它有幫助。

更新：

如果提示錯誤請嘗試以下操作（因爲這些工作了問題的作者）：

1）：嘗試改變端口納克服務--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 2

我沒有使用這一段時間，但可能是你在找什麼（重構它以滿足您的需要）：

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" />