Проверьте, прокручивается ли пользователь в нижней части страницы Angular 2

Какова наилучшая практика, чтобы проверить, прокручивается ли пользователь в нижней части страницы в Angular2 без jQuery? У меня есть доступ к окну в моем приложении? Если нет, я должен проверить прокрутку до нижней части компонента нижнего колонтитула и как это сделать? Директива по компоненту нижнего колонтитула? Кто-нибудь это сделал?

Ответ 1

//Вы можете использовать это.

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

Ответ 2

Для меня нижняя часть моего чата была не в нижней части страницы, поэтому я не мог использовать 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>

Ответ 3

Вместо использования document.body.offsetHeight используйте это:

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