Wie überprüft man das Element im Ansichtsfenster auf Winkel 2?

Question

Wie überprüft man das Element im Ansichtsfenster in Winkel 2 ?. Ich habe es mit vielen npm-Paketen versucht. Aber nicht funktioniert. Wie überprüft man das Element im Ansichtsfenster ?. Ich möchte die API beim Blättern auf der Seite aufrufen, wenn sich das Element im Ansichtsfenster befindet.

Ich habe drei Registerkarten. Ich muss überprüfen, ob die Registerkarte aktiv ist und das Element im Ansichtsfenster ist. Wie zu überprüfen?

Answer 1

I verwendet 'jQuery-viewport-checker', um verschiedene Aufgaben auszuführen, wenn sich Elemente im Ansichtsfenster befinden. Es hat für mich funktioniert. Dies kann Ihnen helfen:

diese Folgen, wenn Sie „jQuery“ nicht in Ihrem Winkel 2 Projekt arbeiten: https://stackoverflow.com/a/42295505/7532440

Sie werden die ‚jQuery-Ansichtsfenster-Checker‘ mit ‚Bower müssen installieren 'und fügen Sie es zu' Scripts 'in der' angular-cli.json'-Datei hinzu, so wie Sie die 'jQuery' in dem von mir bereitgestellten Link installiert haben.

cmd:

bower install jQuery-viewport-checker 

in 'Winkel cli.json': https://github.com/dirkgroenen/jQuery-viewport-checker:

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

Jetzt können Sie 'jQuery-Ansichtsfenster-checker'

Mehr Informationen verwenden,

Ihre app.component.ts wird wie folgt aussehen:

Hier wird die Klasse "visible" in der Klasse ".dummy" in einem Element hinzugefügt, sobald sie im ViewPort ist. Sie sollten es mehr (andere Parameter) nach Ihrem Bedarf erkunden Dementsprechend können Sie Ihren HTML Code. Ich hoffe, es hilft.

aktualisieren:

Wenn es Fehler versuchen, das gibt folgendes (da diese für den Autor der Frage gearbeitet):

1): versuchen, den Anschluss ng Wechsel dient --port 4200-4208 (oder einen anderen Port)

2): Ansichtsfenster checker Code in Dokument setzen bereit wie folgt aus:

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. 
    }); 
}); 

und re move offset: [100]

Answer 2

Ich habe das nicht für eine Weile benutzen, aber sein könnte, was Sie suchen (Refactoring es an Ihre Bedürfnisse anzupassen):

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() 
} 

Beispiel Verwendung:

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