javascript - 将溢出的 div 滚动到 Angular 元素的垂直中心(5)

Question

我有一个由 div 组成的自定义表格，使用通过 Angular 呈现的 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 捕获它们。

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

}