Angular 8- Autoscroll while dragging an element using cdkDrag and cdk-virtual-scroll

Question

I have a long list of elements which have to be dragged and dropped. Which is working if the elements are in the viewport. The page does not scroll if i have to drag further down or up. I am using the CdkVirtualScrollViewport for scrolling and CdkDragDrop for drag and drop.

Heres my html code

<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>

And my .ts file function

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

How do I implement autoscroll while dragging using cdkvirtualscroll?