javascript - 如何使用 mobile safari 停止在 touchend 上滚动？

Question

我试图在网络应用程序上实现这种操作，该应用程序由 View 的“马赛克”组成，总共 6 行、6 列 View 。导航在桌面浏览器上运行良好，但在移动 Safari 中就变得很困难。

这是我想要实现的操作:

User swipes (quickly) -> page moves 1 view up/down/left/right
User touches & drags -> page follows finger User lifts finger (touchend) -> inertial scrolling stops, page moves 1 view up/down/left/right

目前我正在使用 Hammer.js，它在其 Prevent_default 设置为 true 时效果很好，但拖动时内容不会跟随手指。

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

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