在Angular2底部滚动的div

Question

抱歉标题不好，我真的不知道如何用几句话写出有意义的东西。

情况是这样的：

滚动的div有这个css：

.element-list{
  width:100%;
  max-height: 180px;
  overflow-y: auto;
}

topBar 的 height 是 20px，主包装器是 200px。

在滚动的div里面，在html里面，有这样的东西（对你没用，只是为了让你更好理解）：

<div class="something" *ngFor="let data of myData">
  <div>{{data.id}}</data>
</div>

这很好用，每当我在 myData 中添加一些东西时，都会反映到 ngFor 中，所以我看到越来越多的 <div>{{data.id}}</data>。

我想要实现的是在有触发overflow-y: auto;的元素时在底部自动滚动。

我的意思是：因为我的元素很少（比如说，十个元素），所以滚动条是隐藏的。但是当元素超过十个时，滚动条出现了，但并没有到底部。

像这样：

如您所见，还有更多元素。我想要的是 div 会自动滚动到底部。因此，即使添加了某些内容，它也将始终是这样的：

有没有办法在 Angular 中或通过 scss/css 来实现？

Answer 1

使用 ngAfterViewChecked

在视图完成后调用 scrollBottom()

working sample - 点击添加按钮 UI 进行实验

html

<div style="height:200px; overflow-y:auto;" #scroll>
    <div *ngFor="let i of list">
        {{i.name}}
        <br>
    </div>
</div>


<button (click)="Add()">Add</button>

<button (click)="scrollToTop()">Scroll to top</button>
<button (click)="scrollBottom()">Scroll to bottom</button>

组件

@ViewChild('scroll', { read: ElementRef }) public scroll: ElementRef<any>;

  ngAfterViewChecked() {
    this.scrollBottom()
  }

  public scrollBottom() {
    console.log(this.scroll.nativeElement.scrollTop);
    this.scroll.nativeElement.scrollTop = this.scroll.nativeElement.scrollHeight;

  }

  public scrollToTop() {
    this.scroll.nativeElement.scrollTop = 0;
  }