如何解决如何滚动到Angular的底部
我有一个按钮可以为我的帮助对话框创建一个部分,并且我正在尝试添加一项功能,如果用户单击该按钮,则左列将一直滚动到底部。
现在它是滚动的,但不是一直滚动到底部,所以想知道如何解决此问题。如果能找到解决问题的建议或帮助,我将不胜感激。
HTML
<div class="column left" #scrollMe>
<button mat-raised-button color = "primary" (click)="addNewSection()">
<mat-icon>add</mat-icon>
Add new section
</button>
<div *ngFor="let section of mappedSections">
<div style="margin-top: 20px;">
<p>Section</p>
<div>
<mat-form-field appearance="fill">
<input matInput type="text" style="width: 200px; height: 15px;"
(ngModelChange)="nameChanged({newValue: $event,isSection: true,id: section.id})"
[(ngModel)]="section.sectionName">
</mat-form-field>
<button mat-icon-button color="warn" matTooltip="Delete this Section"
(click)="openConfirmDialog(section,true)" style="bottom: 10px;" *ngIf="isSection">
<img class="button-icons" src="/assets/images/icons/delete-icon-warn.svg">
</button>
</div>
</div>
<div>
<p class="substyle">Subsections</p>
</div>
</div>
</div>
TS
@ViewChild('scrollMe') private myScrollContainer: ElementRef;
addNewSection() {
const data = {
sectionName: 'Untitled Section'
};
this.HelpService.createHelpSection(data).subscribe(section => {
this.mappedSections.push(section);
})
this.scrollToBottom();
}
scrollToBottom(): void {
try {
this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
} catch(err) { }
}
解决方法
如果新部分位于底部,则可以在此部分调用const config = {
headers: {
'Content-Type': 'application/json',},params: {
isAccepted: true
}
}
const data = {
data: 'whatever'
}
axios.post(url,data,config)
函数。
您可以尝试:
scrollToBottom(): void {
window.scrollTo({
top: 400,behavior: 'smooth',});
}
在这种情况下,它将向下移动400像素,如果您想使其移动更多,只需增加该值即可。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。