Utrzymuj pozycję przewijania w liście, gdy nowe elementy dodawane

Question

Mam listę elementów, które ja wyświetlanie za pomocą *ngFor

<div id="container"> 
    <div 
     [class.selected]="selectedItem.id == item.id" 
     #container 
     *ngFor="let item of items; indexBy: byId">{{item.name}}</div> 
</div> 

trzymam aktualizowania list tablicy okresowej.

this.listService.index((items) => this.items = items) 

Mam selectedItem który jest używany, aby zaznaczyć pozycję na selekcji.

Po zaktualizowaniu list nowe pozycje można dodać nad wybraną pozycją (głównie) i pod wybraną pozycją. Gdy tak się stanie, wybrany element odsuwa się od aktualnej pozycji widoku. Chcę dopasować scrollOffset rodzica div w ten sposób pozycja pozycji na liście pozostaje w tej samej pozycji widoku.

Aktualizacja:

Aby to zrobić, jestem oszczędność

this.offset; = this.container.scrollHeight - this.container.scrollTop; 

i dodaje wiersz po aktualizacji this.items

this.listService.index((items) => { 
    this.items = items 
    this.container.scrollTop = this.container.scrollHeight - this.offset; 
}) 

to robi praca, ale owijanie to z pracami limitu czasu dokładnie tak, jak chciałem.

setTimeout(() => { 
    this.scrollPosition.restore() 
}, 300) 

Po aktualizacji this.items występuje opóźnienie w świadczeniu nowych elementów DOM.

Jak mogę uzyskać wydarzenie, w którym dodano nowe elementy?

Answer 1

Myślę, że coś jak to będzie pracować dla Ciebie:

Szablon

<div id="container" #cont>... 

Komponent

@ViewChild('cont') contEl: any; 

thisIsCalledWhenNewItemISAdded() { 
    let current = this.contEl.scrollTop; 

    // ...Item added 

    this.contEl.scrollTop = current; 
} 

więc użyć @ViewChild dekorator, aby uzyskać element w komponencie. Następnie przechwytujesz scrollTop, zanim dodasz nowy element i odtworzysz go po dodaniu elementu.