角度离子 - 检测是否<ion-content>滚动最大底部

Question

我正在写一个具有棱角和离子的信使。如果滚动到最大底部，我想触发方法scrollToBottom。因为如果有人向上滚动查看旧消息，而对方正在发送任何消息，他不会每次都被踢到底部。

这是文件：https://ionicframework.com/docs/api/content但我找不到任何能帮我解决这个问题的方法。

Answer 1

如果你想知道底部何时已经最大滚动，那么你需要做这样的代码：

我写了一些示例代码来实现这个目标。

注意：我在这个解决方案中使用了Angular 9和Ionic 5。

<ion-content
[scrollEvents]="true"
(ionScroll)="scrolling($event)"
>
<ion-list>
<ion-item *ngFor="let item of items">
<ion-label>Pokémon Yellow</ion-label>
</ion-item>
</ion-list>
</ion-content>

import { IonContent } from '@ionic/angular';
@ViewChild(IonContent) content: IonContent;
ngOnInit() {
// create a list of items to show the scroll
this.generateNumItems(100);
setTimeout(() => {
// after 2 secs then scroll to bottom
this.scrollToBottom();
}, 2000);
}
generateNumItems(number) {
for (let i = 0; i < number; i++) {
this.items.push(i);
}
}
scrolling(event: any) { // event has an interface but I don't need it
this.detectBottom();
}
scrollToBottom() {
this.content.scrollToBottom(500);
}
async detectBottom() {
const scrollElement = await this.content.getScrollElement(); // get scroll element
// calculate if max bottom was reached
if (
scrollElement.scrollTop ===
scrollElement.scrollHeight - scrollElement.clientHeight
) {
console.info('max bottom was reached!');
}
}