在 Angular2 底部滚动的 div

Question

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

情况是这样的：

滚动的 div 有这个 css：

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

topBar 有一个heightof 20px，主要包装器是 of 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()

工作示例- 单击添加按钮 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;
  }