如何将虚拟滚动应用于列表（Angular4）？

Question

我正在尝试制作一个包含项目列表的块。该块具有最大高度，如果元素超过最大高度，则触发滚动。滚动条应仅适用于列表项。使用Angular4的滚动条时出现问题。

<main>
  <div id="blocker">
    <container>
      <header>header in container</header>
      <div id="wrapper">
        <div id="inner">
          innermost
        </div>
      </div>
    </container>
  </div>
</main>

import {List} from '../../../../../models/list';
import {VirtualScrollerComponent} from 'ngx-virtual-scroller';
import {PerfectScrollbarDirective} from 'angular2-perfect-scrollbar';


export class RoutesObjectComponent implements OnInit {
  listItems;
  @Input() listItems: List[];
  @ViewChild(VirtualScrollerComponent)
  public vscroll: VirtualScrollerComponent;
  @ViewChild('scroll', {read: PerfectScrollbarDirective})
  private pscroll: PerfectScrollbarDirective;
}

.element-list {
  max-height: 500px
}