檢查用戶是否在沒有jQuery的情況下滾動到Angular2的頁面底部的最佳做法是什麼?我有權訪問我的應用程序組件中的窗口嗎?如果不是,我應該檢查滾動到頁腳組件的底部,我該怎麼做?頁腳組件上的指令?有沒有人完成這個?檢查用戶是否已滾動到Angular 2的底部
3
A
回答
8
//你可以使用它。
@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>
相關問題
- 1. 檢查UIWebView是否滾動到底部
- 2. 檢查用戶是否滾動到頂部或底部
- 3. 如何檢查滾動是Angular 4底部的底部?
- 4. 檢查用戶是否已到達頁面底部
- 5. 檢查底部是否達到滾動視圖的方法
- 6. 問題檢測是否已經的UITableView滾動至底部
- 7. 檢查網格是否一直滾動到底部
- 8. 檢查組件Angular 2中是否已有外部js腳本
- 9. 檢測滾動到底部
- 10. 如何使用JQuery檢測用戶是否滾動到頁面的底部?
- 11. 在Firefox中檢測滾動到底部2滾動
- 12. 檢測一個可滾動的DIV是否已經達到底部
- 13. 滾動查看不滾動到底部
- 14. 如何檢查滾動條是否在底部
- 15. 如何使用JQuery檢查div是否一直滾動到底部?
- 16. 檢測,如果用戶已經滾動到一個div的底部
- 17. 如何檢測用戶已滾動到其iPhone上的網頁底部
- 18. 如何檢查用戶是否滾動到元素的30%,從頂部或底部
- 19. 如果用戶滾動到底部
- 20. JQuery Mobile用戶滾動到底部
- 21. ASP.NET - 打開PDF並檢測到用戶滾動到底部
- 22. 當UITableView已滾動到底部時檢測到
- 23. Angular 4 - Firebase - 檢查用戶是否已連接
- 24. 檢測滾動到DIV的底部
- 25. jquery查找div是否達到滾動底部
- 26. 檢查用戶是否正在滾動,如果沒有,則將滾動位置設置爲底部
- 27. 材料設計精簡版,檢查滾動是否達到底部
- 28. 如何檢查網格或表格的滾動按鈕是否已到達表格/網格的底部
- 29. 如何檢查滾動條是否已達到div的末尾?
- 30. 檢測當用戶滾動到底部不工作
只好寫爲@HostListener( 「窗口:滾動」,[]),使其工作。 – pabloruiz55