html - Reliable use of hammer.js to get pan events while still naturally scrolling in iOS ...? -

essentially, want able use hammer.js detect start , end of pan event (or @ least pan-x events), whilst still allowing natural overflow-scrolling on x-axis. touchaction declaration on pan recogniser allows work alongside natural overflow scrolling fine on android > chrome, not on ios > safari (touch-action declarations not being supported safari build).

codepen(debug-mode) or codepen(normal-mode)

eg.

var hit = document.getelementbyid('hit'); var text = document.getelementbyid('text');  var hammer = new hammer.manager(hit); hammer.add(new hammer.pan({   direction: hammer.direction_all,   touchaction: 'pan-x' }));  hammer.on("panstart", function(ev){   console.log('panstart');   text.textcontent = ev.type +" detected."; }); hammer.on("panend pancancel", function(ev){   console.log('panend');   text.textcontent = ev.type +" detected."; }); 

is there reliable way detect directions (or x) of pan movement, allow normal overflow scroll-x behaviour (in ios)? have tried switching pan recogniser vertical, found panstarts aren't / reliably detected straight away.

on second thought, perhaps hammer.js overkill particular use-case.

i've managed desired result, stripping away hammer, , using native ontouchstart , ontouchend events. eg:

adomobject.addeventlistener('touchstart', handlepanstart, false); adomobject.addeventlistener('touchend', handlepanend, false); adomobject.addeventlistener('touchcancel', handlepanend, false); 

this way, default actions touch event fall through default browser behaviour (and in case - overflow!).