javascript - Implementing swipe gestures in a web app that uses -webkit-overflow-scrolling:touch -


i'm working on web application in make widespread use of -webkit-overflow-scrolling:touch.

i'd able implement swipe gestures on same elements (divs) utilize great webkit-specific css feature.

in other words - i'd behave inbox works on native ios mail app; if flick finger vertically - inbox scrolls natural, smooth momentum. if swipe finger horizontally - "mail item" slides left or right. importantly, however, can't both - app allows to scroll or swipe.

i assume implemented this:

  1. capture touchstart event, , prevent default behavior (e.g., event.preventdefault()), because don't know yet if user intends scroll or swipe.
  2. capture touchmove events, , track how far user's finger has moved initial touch point.
  3. after threshold (e.g., 10 pixels), determine whether user's finger has moved more vertically or horizontally. if former - implement scroll. if later, implement swipe.

in theory - seems quite doable in javascript.

however - can't work because - once use event.preventdefault() on initial touchstart event - can't subsequently momentum scrolling work. - can't find way start momentum scrolling programmatically javascript after i've determined user intended scroll.

this seems should common design pattern (swipe gestures , webkit-overflow-scrolling:touch), haven't been able find implementation of it.

i've looked in hammer.js (http://eightmedia.github.io/hammer.js/); enables me detect swipe events on div that's scrolling.

however - don't see how enables me allow scroll or swipe, not both. time hammer.js recognizes swipe gesture - div already scrolling.

thanks in advance!


Comments

Popular posts from this blog

Android layout hidden on keyboard show -

google app engine - 403 Forbidden POST - Flask WTForms -

c - Why would PK11_GenerateRandom() return an error -8023? -