检查用户是否在没有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. 如何检查用户是否在.NET中滚动到WebBrowser控件的底部?
- 6. 检查底部是否达到滚动视图的方法
- 7. 如何使用JQuery检测用户是否滚动到页面的底部?
- 8. 如何检测客户端是否滚动到网页的顶部或底部?
- 9. 在Firefox中检测滚动到底部2滚动
- 10. 滚动查看不滚动到底部
- 11. 如何检查滚动条是否在底部
- 12. 如何使用JQuery检查div是否一直滚动到底部?
- 13. 如何检测用户已滚动到其iPhone上的网页底部
- 14. 检测,如果用户已经滚动到一个div的底部
- 15. 如何检查用户是否滚动到元素的30%,从顶部或底部
- 16. JQuery Mobile用户滚动到底部
- 17. 当UITableView已滚动到底部时检测到
- 18. 检测滚动到DIV的底部
- 19. Angular 4 - Firebase - 检查用户是否已连接
- 20. 检查用户是否正在滚动,如果没有,则将滚动位置设置为底部
- 21. 材料设计精简版,检查滚动是否达到底部
- 22. 如何检查网格或表格的滚动按钮是否已到达表格/网格的底部
- 23. JQuery检测滚动底部
- 24. 如何检测滚动到底部
- 25. 检查用户名是否已注册
- 26. 检测用户已滚动到页面的最低部分 - jQuery
- 27. 我如何知道滚动视图已经滚动到底部?
- 28. Angular 2 - 检查是否有任何默认值已更改
- 29. 检查用户是否已登录
- 30. 滚动到div的底部
只好写为@HostListener( “窗口:滚动”,[]),使其工作。 – pabloruiz55