My web page has both text and a pinch-zoomable canvas-drawn diagram. Mobile users can scroll the page as usual with a one-finger scroll gesture, but not if their gesture starts on the diagram. That's because hammer.js (which I used to implement the pinch zoom) sets touch-action: none, preventing the native scroll. How can I allow both?
This answer shows how to combine native scroll with hammer.js horizontal swipe via touch-action: pan-y !important;, but that doesn't work for pinch zoom. I could use hammer.js to also implement one-finger vertical scroll, but it's no substitute for the beautifully-tuned native scroll.
There are a few other JS projects supporting pinch zoom but none appear to have the robustness of hammer.js. I could try implementing pinch zoom by handling the touch events directly, but it appears quite involved to handle all the edge cases.
(But I know it's possible, as embedded google maps do it -- "Use two fingers to move the map".)
I'd appreciate any suggestions, or experience.
