滾動溢出的div到Angular中元素的垂直中心（5）

Question

我有一個由div組成的自定義表，該表使用通過如下所示的角度呈現的flex布局：

<div class="tbody">
  <div class="tr"
       *ngFor="let ask of asks">
    <div class="td centered red">{{ask.price | number: '1.8-8'}}</div>
    <div class="td centered">{{ask.amount | number: '1.7-7'}}</div>
    <div class="td centered">{{ask.sum | number: '1.7-7'}}</div>
  </div>
  <div class="tr"> this should be in the middle</div>
  <div class="tr"
       *ngFor="let bid of bids">
    <div class="td centered green">{{bid.price | number: '1.8-8'}}</div>
    <div class="td centered">{{bid.amount | number: '1.7-7'}}</div>
    <div class="td centered">{{bid.sum | number: '1.7-7'}}</div>
  </div>
</div>

我希望“表格”在呈現時以中間tr為中心（請參見上面的摘錄）。

例如，這類似於訂單簿在GDAX上的外觀（請參見下面的屏幕截圖）。 從右邊的滾動條可以看出，這是一個更長的溢出div，當前位於中間。 它呈現在用戶中間。

如果上述操作是不可能的，則一個中間的解決方法是將整個div居中（假設兩個數據集的長度相似）。 我也無法找到任何解決方案，因此，如果有人知道，請隨時提交答案。

Answer 1

您可以使用@ViewChild裝飾器獲取對該元素的引用並設置scrollTop屬性。

首先，向元素添加一些模板引用，以便可以使用@ViewChild捕獲@ViewChild 。

<div class="tbody" #scrollMe>
    ...
    <div class="tr" #middle>...</div>
    ...
</div>

然后，在組件實現中聲明@ViewChild元素引用，並在初始化組件時計算正確的scrollTop值。

export class ExampleComponent {

  @ViewChild('scrollMe') scrollElem: ElementRef;
  @ViewChild('middle') middle: ElementRef;

  ngOnInit() {
    var elem = this.scrollElem.nativeElement;
    var middleOffset = this.middle.nativeElement.offsetTop;
    elem.scrollTop = middleOffset - (elem.offsetHeight / 2);
  }

}