ユーザーが角2で下にスクロールしていることを確認します

Question

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

Answer 1

//これを使用できます。私にとって

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

Answer 2

私chatboxの下部には、ページの下部にありませんでしたので、私は、ユーザーがchatboxの一番下までスクロールかどうかを確認するために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>