Priotising scroll

[musaffarpatel]

I am implementing a product slider. Each slide will also have the ability to pan and zoom using this library. The slider is a simply html / css slider which uses a Div with overflow / scrolling properties to implement slider behaviour.

What I need to accomplish is the following: Each slider element will have a panzoom associated with it. I only allow panning when zoomed using the "panOnlyWhenZoomed" option - this gives me the possibility to process swiping when not zoomed in to scroll the slider.

Therefore is it al possible to prevent the swipe action from being handled by PanZoom unless zoomed in? maybe a "scrollOnlyWhenZoomed" option. This should hopefully allow the browse to handle the swupe gesture instead.

[timmywil]

Thanks for opening an issue. First, it isn't scrolling because preventDefault is called whether panzoom handles the event or not. I would recommend looking at the handleStartEvent option and only preventing default under certain conditions. Also, you could set disablePan when those conditions are met so that Panzoom doesn't try to pan during the scroll. But, I think a bespoke option for this case is too niche.

[musaffarpatel]

@timmywil Thanks for the reply. This sounds like a promising approach. I therefore have the following:

            const panzoom = Panzoom(slide, {
                maxScale: 5,
                animate: true,
                panOnlyWhenZoomed: true,
                handleStartEvent: () => {}
            });

Yet, the scroll behaviour for the slides parent div is lost, even with the above.

Even if I add disablePan option, it stilll prevent default scrolling behaviour for parent div:

            const panzoom = Panzoom(slide, {
                maxScale: 5,
                animate: true,
                panOnlyWhenZoomed: true,
                disablePan: true,
                handleStartEvent: () => {
                }
            });

If I don't initialise the PanZoom then the scrolling works. Do you have any ideas?