Y axis value never goes negative

[Walter0697]

When zooming in or dragging down on my content, y axis value never goes below 0, which makes it difficult to navigate when I am trying to zoom in to the bottom half of the content, every time I drag or zoom so that the y axis becomes a negative number, it just automatically jump back to 0. Hope someone can help me here, thanks a lot!

[retyui]

You can set padding, to be able to drag and zoom out of bounds:

Demo: https://react-quick-pinch-zoom.netlify.app/

[Walter0697]

You can set padding, to be able to drag and zoom out of bounds:

Demo: https://react-quick-pinch-zoom.netlify.app/

I don't think this is the issue that I am facing, my problem is I cannot view the bottom half of the element when I zoom in since the y axis won't go below 0, this issue does not happen in x axis. By the way, I can see that the content of my children automatically resize when it starts (my children is bigger than the parent), I don't know if it causes any issue. Thanks!

[retyui]

@Walter0697 could you please show demo of this issue?

[Walter0697]

@Walter0697 could you please show demo of this issue?

sure thing!

https://codepen.io/walter0697/pen/vYpKErE

here you go, it is a rough version of my code for my website, I can make some videos if you fail to trigger the issue in your device. I am using the library for mobile device so a view with bigger height than width can have a better look at that issue, but I can see that the issue will happen on PC as well. I don't know if my implementation is correct but I thought it should be pretty straight forward?

As you can see, if my div with React reference has a long width, first I can notice is that, it will resize the element to fit the screen width, which is awesome I can see that. However, it moves my element to a lower level for some reasons. I can use pinchZoomRef.current.scaleTo({ x: 0, y: 0, scale: 1 }) and the element will go back to the expected position.

Second issue is that, when I zoom in to the element, then I drag the element, y level will suddenly go back to 0 even I drag horizontally or drag down, so I cannot really zoom and look at the bottom half of the element too well.

I am trying to make some overlays on top of the picture like below so I used an absolute div to wrap the whole content in codeapen, I don't know if that will cause any issue?

<absolute div>
   <relative background image />
   <relative overlay/>
   <relative overlay/>
</div>

I had tried few different libraries and I found out that this one works the best for my project so I really hope that this issue can be fixed, or if my implementation has a problem, please do let me know! Many thanks!

[retyui]

@Walter0697 it isn't a library issue, as child element overflow parent container.

How fix it? fit child context inside a container:

• do not lock container height
• apply css object-fit to fit image