滚动溢出的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);
  }

}