Расстояние между элементом и курсором увеличивается при вертикальной прокрутке при перетаскивании в угловой 5

Question

Я реализовал функцию перетаскивания с помощью event-emitter в angular 5. Перетаскивание дочернего элемента div внутри моего родительского контейнера div.Перетаскивание работает как fine.Если возникает вертикальная полоса прокрутки, то происходит смещение между курсором и перетаскиваемым элементом div

`

<div class="row">
    <div class="map">
      <img style="width:100%;height: 100%" style="cursor: pointer;" id="imgMap" 
       class="img-thumbnail" 
       src="https://imgd.aeplcdn.com/1056x594/n/3cpbpra_1422080.jpg?q=80"
      alt=""/><div *ngFor="let xandYcoordinate of xandYcoordinates"><div appTagDraggable 
         [style.left.%]="xandYcoordinate.left" 
         [style.top.%]="xandYcoordinate.top" class="box" 
        (window:resize)="onResize($event)" 
         [style.width.%]="xandYcoordinate.width" 
         [style.height.%]="xandYcoordinate.height"
        (dragStart)="onDragStart()" (dragMove)="onDragMove($event)" 
       (dragEnd)="onDragEnd()">
      </div>
   </div>
  </div>
</div>

`