如何停止移动旅行的触点滚动？

Question

我试图在一个web应用程序上实现这种操作，它包括一个视图的“马赛克”，总共有6列6行的视图。导航在桌面浏览器上工作得很好，但是使用Mobile会变得很困难。

这就是我想要得到的行动：

用户滑动(快速) ->页面上/下/左/右移动一个视图 用户触摸和拖拽->页面跟随手指用户提起手指(触点) ->惯性滚动停止，页面移动一个视图上/下/左/右

目前，我使用的是Hammer.js，它的prevent_default -setting工作得很好，但拖放时内容不跟随手指。

用代码在拖动事件上移动页面，还是试图劫持触摸屏上的滚动，哪个更容易/更好？

Answer 1

你在正确的轨道上！我爱hammer.js。如果您希望页面与用户手指一起移动，我将使用代码在拖动事件上移动页面。例如，您可以这样做：

hammer.bind('drag', function(ev) {
    x = ev.position.x;
    y = ev.position.y;
    mosaic.style.webkitTransform = 'translate3d('+(x) +'px, '+(y) + 'px, 1px)';

“马赛克”是装瓷砖的容器。棘手的部分是确定哪个图像，然后“快照”到。也许您还可以使用jQuery .offset()来确定触弦和马赛克之间的关系？

查看Hammer.js的最新版本以获得一些额外的帮助。您现在也可以评估：

center      {Object}        center position of the touches. contains pageX and pageY
deltaTime   {Number}        the total time of the touches in the screen
deltaX      {Number}        the delta on x axis we haved moved
deltaY      {Number}        the delta on y axis we haved moved
velocityX   {Number}        the velocity on the x
velocityY   {Number}        the velocity on y