 <p>zoom is a gesture with 2 fingers so you have to listen on touchmove with event.targetTouches.length == 2 and then read the X and Y coordinates from each finger</p> <p>the image zoom centre will be event.targetTouches[0].pageX - event.targetTouches<a href="https://i.stack.imgur.com/3MFHT.png" rel="nofollow noreferrer">1</a>.pageX and event.targetTouches[0].pageY - event.targetTouches<a href="https://i.stack.imgur.com/3MFHT.png" rel="nofollow noreferrer">1</a>.pageY in relationship with your scrollposition or image position (attention to + or -)</p> <p>and your scalefactor should be vectorLengthCurrent-vectorLengthStart</p> <p>see at <a href="http://www.html5rocks.com/en/mobile/touch/" rel="nofollow noreferrer">http://www.html5rocks.com/en/mobile/touch/</a></p> <p>image: <img src="https://i.stack.imgur.com/3MFHT.png" alt="overview"></p> <p>example:</p> <p>image: left: -100px | startFinger[0].pageX: 50px | currentFinger[0].pageX: 55px | startFinger<a href="https://i.stack.imgur.com/3MFHT.png" rel="nofollow noreferrer">1</a>.pageX: 150px | currentFinger<a href="https://i.stack.imgur.com/3MFHT.png" rel="nofollow noreferrer">1</a>.pageX: 140px </p> <p>so the centre should be: startFinger<a href="https://i.stack.imgur.com/3MFHT.png" rel="nofollow noreferrer">1</a>.pageX - startFinger[0].pageX - left (only if startFinger<a href="https://i.stack.imgur.com/3MFHT.png" rel="nofollow noreferrer">1</a>.pageX is greater | Y in the same way)</p> <p>vector length: sqrt(x^2 + y^2);</p>