1、html代码
<div #scrollMe style="height: 100px; overflow: scroll; background: #fff; border: 1px solid #aaa;">
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
</div>
<button (click)="goToScrollBottom()">发送</button>
2、组件代码
import {Component} from '@angular/core';
// 滚动条使用组件
import {ElementRef, AfterViewChecked, ViewChild} from "@angular/core";
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewChecked {
constructor() {
}
@ViewChild("scrollMe")
// 获取元素
public myScrollContainer: ElementRef;
// 其实上面两句代码可以写成:
// @ViewChild("scrollMe") myScrollContainer;
ngAfterViewChecked() {
this.scrollToBottom();
}
// 方法调用
goToScrollBottom() {
this.scrollToBottom();
}
scrollToBottom() {
this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
}
}
如何判断滚动条到底部了
if ((this.myScrollContainer.nativeElement.scrollTop + this.myScrollContainer.nativeElement.clientHeight) == this.myScrollContainer.nativeElement.scrollHeight) {
// 如果到底不了 调用接口加载数据,追加到数组中。
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。