web-dev-qa-db-ja.com

Angular 2で、ユーザーが一番下までスクロールしたかどうかを確認します

ユーザーがjQueryなしでAngular2のページの下部にスクロールしたかどうかを確認するためのベストプラクティスは何ですか？アプリコンポーネントのウィンドウにアクセスできますか？そうでない場合、フッターコンポーネントの下部までスクロールすることを確認する必要があります。どうすればよいですか？フッターコンポーネントのディレクティブ？誰かがこれを達成しましたか？

angularangular2-templateangular2-directives
17
C. Kearns

//これを使用できます。

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

私の場合、チャットボックスの下部がページの下部になかったため、window.innerHeightを使用して、ユーザーがチャットボックスの下部にスクロールしたかどうかを確認できませんでした。 （私の目標は、ユーザーが上にスクロールしようとしない限り、常にチャットの一番下までスクロールすることでした）

代わりに次の方法を使用しましたが、完全に機能しました。

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

いくつかのコンテキスト：

@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) { }
}

そして

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

Document.body.offsetHeightを使用する代わりに、これを使用します。

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

0
Aditya