Scrolling results in incorrect position

[sorawee]

In my app, I have a template object outside the canvas. The template object is draggable, and the canvas is droppable. Users can then drag the template object into the canvas to add a copy object (of the template object) inside the canvas. The position of the copy object should be exactly where the template object is dropped.

To implement this, I have an onDragEnd that computes the position of the copy object inside the canvas along this line:

  const y =
    event.active.rect.current.initial!.top + // initial position of the template
    event.delta.y - // drag delta of the dropped position and the initial position
    event.over!.rect.top; // position of the canvas
  const x =
    event.active.rect.current.initial!.left +
    event.delta.x -
    event.over!.rect.left;

This works perfectly fine if there's no scrolling. However, if the dragging causes scrolling to happen, the position of event.active.rect.current.initial will be incorrect -- it doesn't take scrolling into account. So it would cause the copy object to be positioned incorrectly.

Is there a way to solve this issue?

[sorawee]

Forgot to post an update, and it's embarrassing.... I actually simply need event.active.rect.current.translated!.top - event.over!.rect.top!