controlling iPhone zoom programmatically with javascript

Question

I would like to follow my finger movement on an iPhone screen. However this results in rubber banding and scrolling and therefore I have to turn off the default behaviours.

As explained on this website

https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

I've added eventlisteners, like so

document.addEventListener('touchmove', touchMove, false);
document.addEventListener('gesturechange', gestureChange, false);

and disabled the default behaviour, like so

function touchMove(event){event.preventDefault(); //other code here}
function gestureChange(event){event.preventDefault(); //other code here}

Now, I can do what I intended to, but I can not scale the page anymore. I'm still able to retrieve the touchstart coordinates and retrieve a zoom factor from gesturechange. Logically, I would like to use those to programmatically change the page zoom. How to do that with javascript?

Answer 1

So far I have some success with applying the eventlistener to a div (instead of the document) and turn oft the touchmove call using a boolean once gesturestart is detected. Actually this works pretty good. I can zoom, pan and double tap on the whole document and zoom and double tap on the div. But a pan on the div executes a function to pass the coordinates (and does not pan).