Pourquoi le paramètre scrollTop ne parvient pas à définir la position correcte?

Question

J'ai une longue liste d'éléments dans la liste déroulante. Cette liste est créée avec * ngFor dans Angular 4. J'essaye de créer une fonction qui défile à la position correcte de la liste quand l'utilisateur retourne à la liste d'une vue de détail.

La plupart de cette fonctionnalité fonctionne correctement. Je reçois la position offsetTop à partir de l'élément de liste, puis en faisant défiler le parent vers cette position lorsque l'utilisateur revient.

Cependant, voici le problème -> la propriété scrollTop de l'élément parent n'est jamais précise. Même après l'avoir explicitement défini.

J'installe dans un flux Observable ici:

ngAfterViewInit(){ 

    let facilitiesListPositionStream$ = Observable.combineLatest(this.facilities$, this.scrollPosition$); 

    facilitiesListPositionStream$.subscribe((values)=>{ 
     console.log(values[1]); 
     if(values[1] > 0){ 
     console.log(values[1]); **// Correct position value here** 
     this.listContainer.nativeElement.scrollTop = values[1]; 
     console.log(this.listContainer.nativeElement.scrollTop);**// Correct position value here** 
     }else{ 
     this.listContainer.nativeElement.scrollTop = 0; 
     } 
    }) 
    } 

Mais quand je vérifie la valeur scrollTop calculée du parent

listContainer

dans Chrome DevTools, il est toujours mal et je peux voir la position de défilement incorrecte de l'écran, mais ma déclaration de la console me dit que le réglage était correct.

est ici la propriété calculée:

Et voici la console connecté du code ci-dessus:

Ce qui rend ce problème bizarre est que plus je descends la liste, plus la position est hors . Cela me fait penser qu'il y a un problème avec le calcul de la hauteur de chaque élément, mais je vérifie cela aussi, et c'est précis.

Pour être clair, le problème s'accélère avec chaque ligne. Lorsque je clique sur les éléments de la première rangée, le calcul de la position est correct. La deuxième rangée, la position est éteinte par 22px. La troisième ligne est désactivée de 66px. La 4ème rangée est désactivée par 110px etc ...

Donc le problème augmente de 44PX avec chaque ligne. Je ne peux pas sembler comprendre ce morceau.

Des idées?

Answer 1

Lorsque je rencontre des problèmes comme celui-ci, j'essaie d'abord de voir si c'est une question de timing. Cela fonctionne-t-il si vous placez la commande scrollTop dans un setTimeout? Comme ceci:

window.setTimeout(() => { 
    this.listContainer.nativeElement.scrollTop = values[1]; 
}, 0)