Javascript 在使用-webkit溢出滚动：触摸的web应用程序中实现滑动手势

我正在开发一个web应用程序，其中广泛使用了

-webkit-overflow-scrolling:touch

我还希望能够在那些利用这个伟大的webkit特定css特性的元素（

div

s）上实现滑动手势

换言之，我希望这样做就像收件箱在本机iOS邮件应用程序上工作一样；如果你竖直挥动手指，收件箱就会自然流畅地滚动。如果你水平滑动手指，“邮件项目”会向左或向右滑动重要的是，但是，你不能同时做这两件事-应用程序只允许滚动或滑动

我假设是这样实现的：

捕获

touchstart

事件，并阻止默认行为（例如，

event.preventDefault（）

），因为我们还不知道用户是否打算滚动或滑动

捕获

touchmove

事件，并跟踪用户的手指从初始接触点移动的距离

在特定阈值（例如，10像素）之后，确定用户的手指是垂直移动还是水平移动。如果前一个-机具滚动。如果是后者，则执行刷卡

从理论上讲，这在JavaScript中似乎是完全可行的

但是-我无法让它工作，因为-一旦我在最初的

touchstart

事件上使用

event.preventDefault（）

，我就无法随后让动量滚动工作。也就是说，在我确定用户打算滚动之后，我找不到任何方法来用JavaScript编程启动动量滚动

这似乎应该是一种相当常见的设计模式（滑动手势和webkit溢出滚动：touch），但我还没有找到它的实现

我查看了hammer.js（）；这使我能够检测正在滚动的div上的滑动事件

但是-我不明白这如何使我能够允许滚动或滑动，但不能两者兼而有之。当Hammer.js识别出滑动手势时，div已经滚动了。

---

提前谢谢

不作为答案发布，因为您没有指定您可以使用jQuery，但使用jQuery mobile这是绝对可行的：jsbin演示有点敏感；当我滚动时，它偶尔会出现一次滑动，但总的来说，它的行为似乎和你预期的一样。至少，您可以探索jQuery mobile

swipe*

实现，看看它们是如何识别事件的。当然，除了查看hammer.js.perpatim的源代码外，这可能不会让您走得更远-谢谢您的回复！我希望尽可能避免使用jQuery，但如果需要的话，就这样吧。希望我能在您的示例中了解JS是如何工作的，并使用它。