ユーザーがjQueryなしでAngular2のページの下部にスクロールしたかどうかを確認するためのベストプラクティスは何ですか?アプリコンポーネントのウィンドウにアクセスできますか?そうでない場合、フッターコンポーネントの下部までスクロールすることを確認する必要があります。どうすればよいですか?フッターコンポーネントのディレクティブ?誰かがこれを達成しましたか?
//これを使用できます。
@HostListener("window:scroll", [])
onScroll(): void {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
// you're at the bottom of the page
}
}
私の場合、チャットボックスの下部がページの下部になかったため、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>
Document.body.offsetHeightを使用する代わりに、これを使用します。
if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight) { // you're at the bottom of the page }