How do you count offset from top while maintaining it withing 400px?

Hi there!

I'm creating a React app with an iFrame inside.

I'm trying to create a drag and drop functionality, and I'm having an issue while the object to follow the mouse when scrolling inside the iFrame.

The reason for the issue is because when I scroll, the mouse cordinates with the offset top get messed up.

Here is the demo of the current state: https://streamable.com/vjcj0u

As you can see, the offset is correct on X and Y axis, on the react app and inside the iFrame - but as soon as I scroll inside the iFrame, the offset is wrong.

Now, I've tried numerous things, but can't seem to figure out the math for it.

Any ideas how to offset the scroll?

This is what I got now, that's on the video.

  const documentBodyHeight = 2700;
        const frameViewportHeight = 400;
        const imageHeight = 320
        let mouseY = event.pageY

        // let objectFollowsMouse = event.pageY + iframeOffsetY

        let iframeOffsetY = iframe && iframe?.getBoundingClientRect().top; //@ts-ignore
        let offsetY = (event.pageY  + iframeOffsetY)  
        // let imageOffsetY = dragDrop.imageOffset.offsetY;

       

        console.log("mouse offset position", event.pageY)
        console.log("image offset", offsetY)
        const ab = {
            clientX: event.clientX,
            clientY: event.clientY,
            pageX: offsetX,
            pageY: offsetY,//((mouseY / documentBodyHeight) * frameViewportHeight) + dragDrop.imageOffset.offsetY,
            offsetX: event.offsetX,
            offsetY: event.offsetY,
        }