在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-点击添加按钮用户界面进行实验

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;
  }