Pinch-scroll-zoom within boundaries ?

[cyhnkckali]

rangeY=[0,...] rangeX=[0,...] at Infinit Scroll

When I put a 3000px,4000px html design in the show area, I scale and place it according to the screen width.
But I want to do this,
When I zoom in, my design stays in the centre of the page unless my width dimension exceeds the width dimension of the screen.

You can think of it as a kind of map?

Where I'm having trouble is when specifying the right border of rangeX or rangeY, my content is left justified.

Is there any way to do this?

VUE 3

[cyhnkckali]

Example
https://codesandbox.io/p/sandbox/agitated-tdd-pwgcf6

[cyhnkckali]

@daybrush help me Please =)