我试图探索创建一个HTML5交互的可行性,在这个交互中,触摸可以通过运动的初始方向有条件地捕捉。
我们的目标是捕捉和跟踪触摸的运动,如果它最初是在水平方向移动的话,结合一个只垂直滚动的响应页面布局,我们应该能够使用水平滑动来跟踪它,做一些很酷的事情。
问题在于似乎不可能(尤其是在iOS上)有条件地执行触摸序列捕获。
为了追踪触摸(我的意思是具体地获得x,y坐标的流,其表示手指随时间的位置),touchstart
必须被preventDefault
编辑,以防止页面进行本机动量滚动。(setTimeout
、rAF、jQuery animate
等),甚至CSS关键帧/动画/过渡执行。
我真的很想知道是否有一种方法可以处理原始touchstart
事件的preventDefault()
。JS完全有可能存储该事件对象,然后在稍后的时间(当确定我们确实有兴趣阻止本机滚动启动时)才调用它。
但这肯定会失败,因为在该事件上不运行preventDefault()
的默认行为是使用native-scroll,这将在整个滚动剩余时间内阻止JS执行。未能返回附加到touchstart
的事件侦听器函数似乎不是一个选项,它将冻结所有内容。
因此,在没有任何其他见解的情况下,试探性的答案是,如果我们想要能够捕获所有滑动,那么必须捕获所有滑动,并且滚动必须通过外部手段“伪造”(iScroll)[http://cubiq.org/iscroll-5-ready-for-beta-test](就我个人而言,我希望探索rAF和window.scrollTo
的某种组合,如果iScroll 5不使用这些API,我会感到惊讶)
顺便说一句,第4个演示的描述让我非常兴奋,但事实证明,它所做的只是创建一个页面部分,iScroll水平滚动,而页面的其余部分则有规律地运行,这完全是平凡的。
1条答案
按热度按时间4nkexdtk1#
您可以使用
touch-action
,所有浏览器都支持它的大多数值