如何解决ScrollTop 设置属性在 angular 中不起作用
大家早上好, 我正在尝试使用 angular 创建实时聊天,我必须设置用户在包装器底部滚动的视图,其中有聊天元素。 我已经使用了一些技巧,但是 scrollTop 属性没有连续设置。
这是我的 html 模板:
<section #chat class="chat-wrapper" id="chat">
<div *ngFor="let message of this.messageList" #item>
. . .
</div>
</section>
"chat-wrapper" 具有 "overflow-y:scroll" 属性。
这是打字稿:
@Component({
selector: 'chat-page',templateUrl: './chat-page.component.html',styleUrls: ['./chat-page.component.css'],})
export class ChatPageComponent implements AfterViewInit,AfterContentInit {
messageList;
private scrollContainer: any;
scrolltop: number = null;
@ViewChild('chat',{ read: ElementRef,static: false }) scrollFrame: ElementRef;
@ViewChildren('item') itemElements: QueryList<any>;
constructor(private socketService: SocketService,public global: Global,private route: ActivatedRoute) {
this.socketService.getChat(this.id,this.global.cookie,this.number).subscribe((msg) => {
// HERE I GET THE OLD MESSAGES
this.socketService.startListen(this.id).subscribe((msg) => {
// HERE I GET THE NEW MESSAGES
});
});
}
ngAfterViewInit() {
this.scrollContainer = this.scrollFrame.nativeElement;
this.scrollToBottom();
this.itemElements.changes.subscribe(_ => this.onItemElementsChanged());
}
private onItemElementsChanged(): void {
this.scrollToBottom();
}
ngAfterViewChecked() {
this.scrollToBottom()
this.itemElements.changes.subscribe(_ => this.onItemElementsChanged());
}
private scrollToBottom(): void {
this.scrollContainer.scroll({
top: this.scrollContainer.scrollHeight,left: 0,behavior: 'smooth'
});
}
}
这是我找到并测试的最后一种方法……但不起作用。我也试过 scrollTop=scrollHeight。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。