1

Let's say we have a page with a div at the center which can be dragged and moved anywhere by the user. I can get the position of this rectangle using getBoundingClientRect. Everything is fine.

enter image description here

But now when I pinch-zoom (not ctrl + +) into the page and scroll to a section, I was expecting the getBoundingClientRect values to change but they don't, and that is understandable, as the values of window.scrollX and window.scrollY also remain the same, which is 0 in this case.

But the thing is, how can I calculate the x and y coordinates of the pinch-zoomed section of the page which is currently visible with respect to the origin of the page.

enter image description here

FunnelScr
  • 161
  • 1
  • 12
  • You're right, I didn't think about that, sorry, I deleted my answer – nare214 Jan 13 '22 at 17:15
  • 1
    Have you looked into the [Visual Viewport API](https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API) yet? – EssXTee Jan 13 '22 at 20:18
  • For future readers, `visualViewport.offsetLeft` and `visualViewport.offsetTop` are the required x/y coordinates. Thanks to @EssXTee for the help. – FunnelScr Jan 14 '22 at 17:13

0 Answers0