web-dev-qa-db-fra.com

Vérifiez si l'utilisateur a fait défiler vers le bas dans Angular 2

Quelle est la meilleure pratique pour vérifier si l'utilisateur a fait défiler vers le bas de la page dans Angular2 sans jQuery? Ai-je accès à la fenêtre de mon composant d'application? Sinon, dois-je vérifier le défilement vers le bas du composant pied de page, et comment dois-je procéder? Une directive sur le pied de page? Quelqu'un a-t-il accompli cela?

angularangular2-templateangular2-directives
17
C. Kearns

// Vous pouvez l'utiliser.

@HostListener("window:scroll", [])
onScroll(): void {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
        // you're at the bottom of the page
    }
}
23
mayur

Pour moi, le bas de ma chatbox n'était pas en bas de la page, donc je ne pouvais pas utiliser window.innerHeight pour voir si l'utilisateur faisait défiler vers le bas de la chatbox. (Mon objectif était de toujours faire défiler vers le bas du chat, sauf si l'utilisateur essaie de faire défiler vers le haut)

J'ai plutôt utilisé ce qui suit qui fonctionnait parfaitement:

let atBottom = element.scrollHeight - element.scrollTop === element.clientHeight

un certain contexte:

@ViewChild('scrollMe') private myScrollContainer: ElementRef;
disableScrollDown = false

 ngAfterViewChecked() {
    this.scrollToBottom();
}

private onScroll() {
    let element = this.myScrollContainer.nativeElement
    let atBottom = element.scrollHeight - element.scrollTop === element.clientHeight
    if (this.disableScrollDown && atBottom) {
        this.disableScrollDown = false
    } else {
        this.disableScrollDown = true
    }
}


private scrollToBottom(): void {
    if (this.disableScrollDown) {
        return
    }
    try {
        this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
    } catch(err) { }
}

et

<div class="messages-box" #scrollMe (scroll)="onScroll()">
    <app-message [message]="message" *ngFor="let message of messages.slice().reverse()"></app-message>
 </div>
10
robert king

Plutôt que d'utiliser document.body.offsetHeight, utilisez ceci:

if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight) { // you're at the bottom of the page }

0
Aditya