разделить прокрутку внизу в Angular2

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

вызов scrollBottom () после завершения просмотра с использованием ngAfterViewChecked

рабочий образец - нажмите кнопку добавления пользовательского интерфейса для эксперимента

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