使用cdkDrag和cdk-virtual-scroll拖动元素时的Angular 8自动滚动

Question

我有一长串必须拖放的元素。如果元素在视口中，那是可行的。如果我必须进一步向下或向上拖动，则页面不会滚动。我正在使用CdkVirtualScrollViewport进行滚动，并使用CdkDragDrop进行拖放。

这里是我的html代码

<cdk-virtual-scroll-viewport cdkDropList #virtualScroller  [itemSize]="100" class="stepViewPort" cdkDropList  [cdkDropListData]="listOfSteps" (cdkDropListDropped)="dropSteps($event)" >

    <div [@fadeInOut] class="TestSteps example-item" *cdkVirtualFor="let step of listOfSteps;TemplateCacheSize:0 let i=index" cdkDragBoundary=".example-boundary"  cdkDrag>

我的.ts文件功能

 dropSteps(event) {
moveItemInArray(
  event.container.data,
  event.previousIndex,
  event.currentIndex
);
   let control = <FormArray>this.ActionTypeForm.controls['steps'];
   control.controls=event.container.data;

     this.listOfSteps = this.ActionTypeForm.get('steps')['controls'];
     this.listOfSteps = [...this.listOfSteps];
}

在使用cdkvirtualscroll拖动时如何实现自动滚动？