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 (div
s) 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:
- capture
touchstart
event, , prevent default behavior (e.g.,event.preventdefault()
), because don't know yet if user intends scroll or swipe. - capture
touchmove
events, , track how far user's finger has moved initial touch point. - 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
Post a Comment