How to scroll up or down the page while dragging the item so user can drop on item which is not in current view in Angular 7 cdk drag and drop

Question

Please find below my html and ts file with mock data. While dragging in the list I want to drop on item which is not showing in the current view for that I need to scroll the page up or down while dragging. How I can achieve the scroll functionality in my code below Please find below the details of my ts and html file and image for reference

**page-grid-template.component.html**
<div cdkDropListGroup>
  <div class="grid-layout-col">
    <div *ngFor="let col of tempalteConfig?.structure?.col;let i = index"
      [ngStyle]="{'height': structureMap[i]?.height+'px'}" class="{{structureMap[i]?.size + ' layout-margin'}}">
      <div *ngFor="let item of col;let ii = index" (click)="onClick(item,templateDetails[item])"
        [ngClass]="{'layout-vertical':col.length>1}" cdkDropList [cdkDropListData]="{data: item, index: ii}"
        [cdkDropListEnterPredicate]="canDropItem(templateDetails[item])"
        (cdkDropListDropped)="dropListDropped($event)">
        <div cdkDrag [cdkDragDisabled]="templateDetails[item].isHidden || isEditMode" [cdkDragData]="templateDetails[item]" 
        (cdkDragStarted)="cdkDragStarted($event)">
          <div [ngStyle]="{'min-height.px':placeHolderHeight, 'min-width.px':placeHolderWidth}" class="drag-placeholder"
            *cdkDragPlaceholder></div>
          <sx-grid-layout [data]='templateDetails[item]' layout='col'></sx-grid-layout>
        </div>
        <div class="{{'now-edit-mode-on '+ templateDetails[item].size+'-edit'}}"
          *ngIf="templateDetails[item].tempId===selectId"
          [ngStyle]="{'height':(templateDetails[item].height+'px'),'margin-top':(-templateDetails[item].height+'px')}">
        </div>
      </div>
    </div>
  </div>
  <div class="grid-layout-row">
    <div *ngFor="let row of tempalteConfig?.structure?.row" class="layout-grid">
      <div *ngFor="let item of row; let ii = index" (click)="onClick(item,templateDetails[item])"
        class="Equal layout-margin" [ngStyle]="{'height': (templateDetails[item]?.height||191)+'px'}" cdkDropList
        [cdkDropListData]="{data: item, index: ii}" 
        [cdkDropListEnterPredicate]="canDropItem(templateDetails[item])"
        (cdkDropListDropped)="dropListDropped($event)">
        <div cdkDrag [cdkDragDisabled]="templateDetails[item].isHidden || isEditMode" [cdkDragData]="templateDetails[item]" (cdkDragStarted)="cdkDragStarted($event)">
          <div [ngStyle]="{'min-height.px':placeHolderHeight, 'min-width.px':placeHolderWidth}" class="drag-placeholder"
            *cdkDragPlaceholder></div>
          <sx-grid-layout [data]='templateDetails[item]' layout='row'></sx-grid-layout>
        </div>
        <div class="{{'now-edit-mode-on '+ templateDetails[item].size+'-edit'}}"
          *ngIf="templateDetails[item].tempId===selectId"
          [ngStyle]="{'height':((templateDetails[item].height||191)+'px'),'margin-top':(-(templateDetails[item].height||191)+'px')}">
        </div>
      </div>
    </div>
  </div>
</div>
**page-grid-template.component.ts**
export class PageGridTemplateComponent implements OnInit {

  @Input('data') templateConfig: any;
  @ViewChildren('list') lists: QueryList<CdkDropList>;
  public templateDetails: any = {};
  private sizeMap = {
    'L': 'Large',
    'M': 'Medium',
    'S': 'Small',
    'R': 'Equal'
  };
  private structureMap = {};
  public isRowLayoutVisible: Boolean = false;
  public screenWidth: any;

  constructor(private messageService: MessageService) {
    this.screenWidth = screen.width;
  }

  @HostListener('window:resize', ['$event']) onResize(event) {
    this.screenWidth = screen.width;
  }

  ngOnInit() {
    this.messageService.notify$.subscribe(item => {
      if (item && item.option && item.option === 'grid-layout-visible') {
        this.isRowLayoutVisible = item.value.visible;
        if (!item.value.isNotScroll) {
          this.scrollToView(item.value.visible);
        }
      }
    });
    if (this.templateConfig && this.templateConfig.structure) {
      this.formatTemplateConfig(this.templateConfig);
      this.calculateHeight(this.templateConfig.structure.col);
    }
    console.log(this.templateDetails);
  }

  dropListDropped(event: CdkDragDrop<string[]>) {
     console.log(event);
    console.log(event.previousContainer);
    console.log(event.container);
    console.log(event.previousIndex);
    console.log(event.currentIndex);
    console.log(event.previousContainer === event.container);
    console.log(this.templateDetails);
      const prev = event.previousContainer.data[event.previousIndex];
      const current = event.container.data[event.currentIndex];
      const el = this.templateConfig.content;
      const prevElIndex = _.findIndex(el, { 'section_name': prev });
      const currentElIndex = _.findIndex(el, { 'section_name': current });
      el[prevElIndex].section_name = current;
      el[currentElIndex].section_name = prev;
      this.formatTemplateConfig(this.templateConfig);
      this.calculateHeight(this.templateConfig.structure.col);
  }

  formatTemplateConfig(data) {
    if (data && data.content && data.content.length) {
      data.content.forEach(element => {
        if (element.section_name) {
          if (!element.section_content) {
            element.section_content = {};
          }
          element.section_content['size'] = '';
          const char = element.section_name.charAt(0);
          if (char && this.sizeMap[char]) {
            element.section_content['size'] = this.sizeMap[char];
          }
          this.templateDetails[element.section_name] = element.section_content;
        }
      });
    }
  }

  calculateHeight(structure = []) {
    structure.forEach((element, idx) => {
      const height = ((460 - (6 * (element.length - 1))) / (element.length));
      if (element.length) {
        const char = element[0].charAt(0);
        this.structureMap[idx] = {};
        this.structureMap[idx]['height'] = height - 1;
        if (char && this.sizeMap[char]) {
          this.structureMap[idx]['size'] = this.sizeMap[char];
        }
      }
      element.forEach(item => {
        if (this.templateDetails[item]) {
          this.templateDetails[item]['height'] = height;
        } else {
          this.templateDetails[item] = this.structureMap[idx];
        }
      });
    });
  }
}

**My templateConfig Data format**
 {
      
        "structure": {
          "col": [
            [
              "L1"
            ],
            [
              "M1",
              "M2"
            ],
            [
              "S1",
              "S2",
              "S3"
            ]
          ],
          "row": [
            [
              "R1-1",
              "R1-2",
              "R1-3",
              "R1-4"
            ],
            [
              "R2-1",
              "R2-2",
              "R2-3",
              "R2-4"
            ]
          ]
        },
        "content": [
          {
            "section_name": "L1",
            "section_content": {}
          },
          {
            "section_name": "M1",
            "section_content": {}
          }, 
          {
            "section_name": "M2",
            "section_content": {}
             
          },
          {
            "section_name": "S1",
            "section_content": {}
            
            }
          ]
}