如何停止与移动Safari浏览器的滚动？

问题描述：

我试图在一个网络应用程序上获得这种动作，它由一个“马赛克”视图组成，共有6列6列视图。导航在桌面浏览器上很好地工作，但使用Mobile Safari变得困难。如何停止与移动Safari浏览器的滚动？

这是我试图让行动：

用户扫描（快） - >页面移动1个视图上/下/左/右
用户触摸&拖累 - >页面如下手指用户抬起手指（touchend） - >惯性滚动停止，页面移动1个视图上/下/左/右

目前我使用Hammer.js，它的伟大工程，其prevent_default -setting为真，但拖动时内容不会跟随手指。

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

答

您正处在正确的轨道上！我喜欢hammer.js。如果您希望页面随用户手指一起移动，我将使用代码在拖动事件上移动页面。例如，您可以执行如下操作：

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

“mosaic”是容纳瓷砖的容器。棘手的部分是确定哪个图像然后“捕捉”。也许你也可以使用jQuery .offset（）来确定touche coords和你的马赛克之间的关系吗？

查看最新版本的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

如何停止与移动Safari浏览器的滚动？

相关推荐