search

retyui / react-quick-pinch-zoom

A react component that providing multi-touch gestures for zooming and dragging on any DOM element.
https://react-quick-pinch-zoom.netlify.app/
308 stars 46 forks source link

How to swipe down whole page with mixed contents when zoom is 1 #15

Closed openmaya closed 1 year ago

openmaya commented 4 years ago

I intend to use this on webview. Content area is longer than Mobile device screen height and because the area captures swipe down event even when it was zoomed out(zoom scale 1), app looks like stoped. Can you share how to configure it?

Thanks.

retyui commented 4 years ago

Did you mean that zoomable\draggable area full screen and a user can't scroll content down?

robertn702 commented 4 years ago

I also have this issue. I have a social feed similar to Instagram. You can't scroll the page if you touch an image while swiping. This is also the behavior when enabled is set to false;

retyui commented 4 years ago

@robertn702 Please try: 

<QuickPinchZoom
   enabled={false}
   containerProps={{
     style: {
       touchAction: "auto"
    }
  }}
/>
umizoomi commented 3 years ago

@robertn702 have you been able to fix it? I've tried to use the containerProps as given by @retyui but it doesn't work for me.

I'm trying to put a QuickPinchZoom component inside a swiper slide but experiencing the same problem that i cannot scroll down when you touch the QuickPinchZoom component.

And i'm also looking for a way to keep the possibility to swipe through the swiper slider. This seems to work when setting draggableUnzoomed={false} but the above problem still persists

robertn702 commented 3 years ago

@umizoomi I had already switched to https://github.com/prc5/react-zoom-pan-pinch which doesn't have this issue, so never got to try the proposed solution.

umizoomi commented 3 years ago

@robertn702, thanks for your reaction. i now fixed it by not using any extra library at all as swiper supports pinch-zoom, hehe